छवियों को ओवरले कैसे करें

Question

मैं सीएसएस का उपयोग करके एक छवि को दूसरे के साथ ओवरले करना चाहता हूं। इसका एक उदाहरण पहली छवि है (यदि आप चाहें तो पृष्ठभूमि) एक उत्पाद का थंबनेल लिंक होगा, लिंक के साथ लाइटबॉक्स / पॉपअप छवि का एक बड़ा संस्करण दिखाएगा।

इस लिंक की गई छवि के ऊपर, मैं एक आवर्धक कांच की एक छवि चाहूंगा, लोगों को यह दिखाने के लिए कि इस छवि को बड़ा करने के लिए क्लिक किया जा सकता है (जाहिर है यह आवर्धक कांच के बिना स्पष्ट नहीं है)।

Comments

आपका प्लगइन प्रश्न का उत्तर नहीं देता है, और जबकि कुछ संबंधित है, वह नहीं है जो पूछा गया था।

— बाशविस

Answer 1

मैं बस एक परियोजना में यह सटीक काम कर रहा हूँ। HTML पक्ष इस तरह से देखा गया:

<a href="[fullsize]" class="gallerypic" title="">
  <img src="[thumbnail pic]" height="90" width="140" alt="[Gallery Photo]" class="pic" />
  <span class="zoom-icon">
      <img src="/images/misc/zoom.gif" width="32" height="32" alt="Zoom">
  </span>
</a>

फिर CSS का उपयोग करना:

a.gallerypic{
  width:140px;
  text-decoration:none;
  position:relative;
  display:block;
  border:1px solid #666;
  padding:3px;
  margin-right:5px;
  float:left;
}

a.gallerypic span.zoom-icon{
  visibility:hidden;
  position:absolute;
  left:40%;
  top:35%;
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}

a.gallerypic:hover span.zoom-icon{
  visibility:visible;
}

मैंने सीएसएस पर बहुत सारे नमूने छोड़ दिए ताकि आप देख सकें कि मैंने शैली को करने का फैसला कैसे किया। ध्यान दें कि मैंने अस्पष्टता को कम किया ताकि आप आवर्धक ग्लास के माध्यम से देख सकें।

उम्मीद है की यह मदद करेगा।

संपादित करें: अपने उदाहरण के लिए स्पष्ट करने के लिए - यदि आप चाहते थे तो आप visibility:hidden;इसे अनदेखा कर सकते हैं और :hoverनिष्पादन को मार सकते हैं, यह सिर्फ उसी तरह था जैसे मैंने किया था।

Comments

हाँ, मैंने सोचा कि यह शायद एक पूर्ण स्थिति समाधान होगा। मुझे यह पसंद है क्योंकि मुख्य छवि एक छवि बनी हुई है, यह एक पृष्ठभूमि छवि नहीं बनती है।

— रॉबिन बार्न्स

टिम के।: सीएसएस को छोड़कर आपका कोड ठीक है। इंजन सीएसएस को दाएं से बाएं पढ़ता है। जब आप 'a.gallerypic' का उपयोग करते हैं तो यह 'gallerypic' के लिए पहले दिखता है और फिर यह जाँचता है कि क्या 'gallerypic' में 'a' पूर्वज है या नहीं। इसे हल करने के लिए, 'ए' आउट को छोड़ दें, ताकि आप प्राप्त कर सकें। पूर्ववर्ती 'क' की कोई आवश्यकता नहीं।

— मार्टिन विला

एक समस्या है जो अनसुलझी है मुझे लगता है, जो यह है कि आप प्रदर्शन का उपयोग करने के लिए मजबूर हैं: ब्लॉक (जबकि छवियां डिफ़ॉल्ट रूप से इनलाइन हैं)।

— पीटर Tseng

Answer 2

इस लेख द्वारा सुझाई गई एक तकनीक, यह करने के लिए होगी:

<img style="background:url(thumbnail1.jpg)" src="magnifying_glass.png" />

Comments

मैथ्यू, मुझे बहुत संदेह होगा।

— डेविड शेरेट

Answer 3

सीएसएस के साथ केवल अतिरिक्त टैग के साथ सामग्री को संशोधित किए बिना ऐसा करने का एक सरल तरीका यहां (कोड और उदाहरण के साथ) दिखाया गया है: http://soukie.net/2009/08/20/typography-and-css/#example

यह तब तक काम करता है, जब तक कि मूल तत्व स्थैतिक स्थिति का उपयोग नहीं कर रहा है। बस सापेक्ष स्थिति के लिए यह सेटिंग चाल है। इसके अलावा, IE <8 का समर्थन नहीं करते हैं : चयनकर्ता या सामग्री से पहले ।

Comments

यह वास्तव में बहुत अच्छी तरह से काम करता है, यह बिल्कुल मार्कअप को बदलने के बिना ऐसा करने में सक्षम है!

— axxxman 9

कृपया कभी भी नीचे जाने की स्थिति में, इस URL से कोड पेस्ट करें। यह स्वीकृत उत्तर होना चाहिए। कोड है: पी {स्थिति: रिश्तेदार; प्रदर्शन क्षेत्र; } p: आफ्टर {content: url (magnify.png); स्थिति: निरपेक्ष; सही: 20 पीएक्स; शीर्ष: 20 पीएक्स;

— एरिक स्टीनबोर्न जूल

Answer 4

यहाँ है कि मैंने हाल ही में यह कैसे किया। शब्दार्थ से परिपूर्ण नहीं, लेकिन काम हो जाता है।

<div class="container" style="position: relative">
<img style="z-index: 32; left: 8px; position: relative;" alt="bottom image" src="images/bottom-image.jpg">
<div style="z-index: 100; left: 72px; position: absolute; top: 39px">
<img alt="top image" src="images/top-image.jpg"></div></div>

Answer 5

आप इस ट्यूटोरियल को देख सकते हैं: http://www.webdesignerwall.com/tutorials/css-decorative-gallery/

इसमें लेखक एक ओवरलेइंग इमेज जोड़ने के लिए एक खाली स्पैन एलिमेंट का उपयोग करता है। यदि आप संभव के रूप में अपने कोड को साफ रखना चाहते हैं, तो आप उक्त अवधि तत्वों को इंजेक्ट करने के लिए jQuery का उपयोग कर सकते हैं। उक्त लेख में एक उदाहरण भी दिया गया है।

उम्मीद है की यह मदद करेगा!

-डेव

Answer 6

यदि आप केवल होवर पर आवर्धक कांच चाहते हैं तो उपयोग कर सकते हैं

a:hover img { cursor: url(glass.cur); }

http://www.javascriptkit.com/dhtmltutors/csscursors.shtml

यदि आप इसे वहां स्थायी रूप से चाहते हैं, तो आपको संभवतः इसे मूल सूत्र में शामिल करना चाहिए, या इसे HTML में जोड़ने के बजाय जावास्क्रिप्ट का उपयोग करना चाहिए (यह पूरी तरह से शैली है और सामग्री में नहीं होना चाहिए)।

मुझे बताएं कि क्या आप जावास्क्रिप्ट पक्ष पर मदद चाहते हैं।

Answer 7

CSS3 में, आप निम्न कार्य कर सकते हैं:

.double-image {
    background-image: url(images/img1.png), url(images/img2.png);
}

से ले लिया सीएसएस का उपयोग कर कई पृष्ठभूमि छवियों सकते हैं मेरे पास है?

Answer 8

हम चाहते हैं कि बच्चे के ऊपर माता-पिता हों। इसे आपको इसी तरह करना होगा।

आप डाल imgमें spanनिर्धारित करते हैं, z-index & position, दोनों तत्वों के लिए और अतिरिक्त displayअवधि के लिए। होवर जोड़ें spanताकि आप इसे परख सकें और आपको मिल गया!

HTML:

<span><img src="/images/"></span>

सीएसएस

span img {
    position:relative;
    z-index:-1;
}
span {
    position:relative;
    z-index:initial;
    display:inline-block;
}
span:hover {
    background-color:#000;
}

Answer 9

जब तक आप <img>टैग का उपयोग नहीं करते हैं , जो अपने आप एक छवि प्रदर्शित करता है, तो आप इसे केवल शुद्ध सीएसएस के साथ प्राप्त नहीं कर पाएंगे। आपको प्रत्येक चित्र के लिए दो HTML तत्वों की भी आवश्यकता होगी। इसका कारण यह है कि आप जिस तरह से सीएसएस के माध्यम से एक तत्व प्रदर्शित कर सकते हैं वह background-imageसंपत्ति के साथ है , और प्रत्येक तत्व में केवल एक पृष्ठभूमि छवि हो सकती है। आप कौन से दो तत्व चुनते हैं और आप उन्हें किस स्थिति में रखते हैं, यह आप पर निर्भर है। कई तरीके हैं जिनसे आप एक HTML तत्व को दूसरे से ऊपर रख सकते हैं।

Comments

यदि आप का उपयोग करते हैं: पहले या: छद्म चयनकर्ताओं के बाद आप सिर्फ javacript का उपयोग करके html जोड़ सकते हैं। यह उत्तर stackoverflow.com/a/3098231/272208 स्रोत कोड में जोड़े गए एक दूसरे HTML तत्व के बिना एक रास्ता दिखाता है

— जेसिका ब्राउन

Answer 10

यहां एक ओवरले छवि प्रदर्शित करने के लिए एक अच्छी तकनीक है जो एक छवि लिंक पर एक अर्ध-पारदर्शी पृष्ठभूमि के साथ केंद्रित है:

एचटीएमएल

<div class="image-container">
    <a class="link" href="#" >  
        <img class="image" src="/img/thumbnail.png"/>
        <span class="overlay-image"><img src="/img/overlay.png"></span>
    </a>    
</div>

सीएसएस

div.image-container{
    position: relative;
}
a.link{
    text-decoration: none;  
    position: relative;
    display: block;
}

a.link span.overlay-image{
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    background-color: rgba(0,0,0,0.2); /* black background with 20% alpha */
}

a.link span.overlay-image:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;   
}

a.link:hover span.overlay-image img{
    display: inline-block;  
    vertical-align: middle;     
}

a.link:hover span.overlay-image{
    visibility: visible;
}

Answer 11

यहाँ अर्ध-पारदर्शी पृष्ठभूमि के साथ एक JQuery तकनीक है।

एचटीएमएल

<html>
<head>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <title>Image Gallery</title>
</head>
<body>
    <h1>Image Gallery</h1>

    <ul id="imageGallery">
        <li><a href="images/refferal_machine.png"><img src="images/refferal_machine.png" width="100" alt="Refferal Machine By Matthew Spiel"></a></li>
        <li><a href="images/space-juice.png"><img src="images/space-juice.png" width="100" alt="Space Juice by Mat Helme"></a></li>
        <li><a href="images/education.png"><img src="images/education.png" width="100" alt="Education by Chris Michel"></a></li>
        <li><a href="images/copy_mcrepeatsalot.png"><img src="images/copy_mcrepeatsalot.png" width="100" alt="Wanted: Copy McRepeatsalot by Chris Michel"></a></li>
        <li><a href="images/sebastian.png"><img src="images/sebastian.png" width="100" alt="Sebastian by Mat Helme"></a></li>
        <li><a href="images/skill-polish.png"><img src="images/skill-polish.png" width="100" alt="Skill Polish by Chris Michel"></a></li>
        <li><a href="images/chuck.png"><img src="images/chuck.png" width="100" alt="Chuck by Mat Helme"></a></li>
        <li><a href="images/library.png"><img src="images/library.png" width="100" alt="Library by Tyson Rosage"></a></li>
        <li><a href="images/boat.png"><img src="images/boat.png" width="100" alt="Boat by Griffin Moore"></a></li>
        <li><a href="images/illustrator_foundations.png"><img src="images/illustrator_foundations.png" width="100" alt="Illustrator Foundations by Matthew Spiel"></a></li>
        <li><a href="images/treehouse_shop.jpg"><img src="images/treehouse_shop.jpg" width="100" alt="Treehouse Shop by Eric Smith"></a></li>
    </ul>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

सीएसएस

/** Start Coding Here **/
#overlay {
  background:rgba(0,0,0,0.7);
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  display:none;
  text-align:center;
}

#overlay img {
 margin-top: 10%; 
}

#overlay p {
 color:white; 
}

app.js

var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p></p>");

// 1. Capture the click event on a link to an image
$("#imageGallery a").click(function(event){
  event.preventDefault();

  var imageLocation = $(this).attr("href");

  // 1.1 Show the overlay.
  $overlay.show();

  // 1.2 Update overlay with the image linked in the link
  $image.attr("src", imageLocation);

  // 1.3 Get child's alt attribute and set caption
  var captionText = $(this).children("img").attr("alt");
  $caption.text(captionText);


 // 2. Add overlay
 $("body").append($overlay);

    // 2.1 An image to overlay
    $overlay.append($image);

    // 2.2 A caption to overlay
    $overlay.append($caption);

});

//When overlay is clicked
$overlay.click(function(){
  //Hide the overlay
  $overlay.hide();
});