Cara overlay gambar

Saya ingin overlay satu gambar dengan yang lain menggunakan CSS. Contoh dari ini adalah gambar pertama (latar belakang jika Anda suka) akan menjadi tautan thumbnail dari suatu produk, dengan tautan yang membuka lightbox / popup yang menunjukkan versi gambar yang lebih besar.

Di atas gambar tertaut ini, saya ingin gambar kaca pembesar, untuk menunjukkan kepada orang-orang bahwa gambar dapat diklik untuk memperbesarnya (tampaknya ini tidak jelas tanpa kaca pembesar).

Saya baru saja selesai melakukan hal yang tepat ini dalam sebuah proyek. Sisi HTML tampak sedikit seperti ini:

<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>

Kemudian menggunakan 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;
}

Saya meninggalkan banyak sampel di sana di CSS sehingga Anda dapat melihat bagaimana saya memutuskan untuk melakukan style. Catatan saya menurunkan opacity sehingga Anda bisa melihat melalui kaca pembesar.

Semoga ini membantu.

EDIT: Untuk mengklarifikasi untuk contoh Anda - Anda bisa mengabaikan visibility:hidden;dan membunuh :hovereksekusi jika Anda mau, ini adalah cara saya melakukannya.

Salah satu teknik, disarankan oleh artikel ini , adalah melakukan ini:

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

Cara mudah melakukannya dengan CSS saja tanpa mengubah konten dengan tag tambahan ditunjukkan di sini (dengan kode dan contoh): http://soukie.net/2009/08/20/typography-and-css/#example

Ini berfungsi, selama elemen induk tidak menggunakan penentuan posisi statis. Cukup mengaturnya ke posisi relatif melakukan trik. Juga, IE <8 tidak mendukung : sebelum pemilih atau konten .

Inilah cara saya melakukannya baru-baru ini. Tidak sempurna secara semantik, tetapi menyelesaikan pekerjaan.

<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>

Anda mungkin ingin melihat tutorial ini: http://www.webdesignerwall.com/tutorials/css-decorative-gallery/

Di dalamnya penulis menggunakan elemen rentang kosong untuk menambahkan gambar overlay. Anda dapat menggunakan jQuery untuk menyuntikkan elemen span tersebut, jika Anda ingin menjaga kode Anda sebersih mungkin. Contoh juga diberikan dalam artikel tersebut.

Semoga ini membantu!

-Sayang

Jika Anda hanya ingin kaca pembesar di hover maka Anda dapat menggunakannya

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

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

Jika Anda menginginkannya di sana secara permanen, Anda mungkin harus memasukkannya ke dalam thumnail asli, atau menambahkannya menggunakan JavaScript daripada menambahkannya ke HTML (ini murni gaya dan tidak boleh dalam konten).

Beri tahu saya jika Anda ingin bantuan di sisi JavaScript.

Di CSS3, Anda dapat melakukan hal berikut:

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

Mengambil dari Dapatkah saya memiliki beberapa gambar latar belakang menggunakan CSS?

Yang kami inginkan adalah orangtua di atas anak. Ini adalah bagaimana Anda melakukannya.

Anda memasukkan imgke dalam span, mengatur z-index & positionuntuk kedua elemen, dan ekstra displayuntuk rentang. Tambahkan arahkan ke spansehingga Anda dapat mengujinya dan Anda mendapatkannya!

HTML:

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

CSS

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

Kecuali Anda menggunakan <img>tag, yang menampilkan gambar dengan sendirinya, Anda tidak akan dapat mencapai hal ini hanya dengan CSS murni. Anda juga akan membutuhkan DUA elemen HTML - satu untuk setiap gambar. Ini karena satu-satunya cara Anda membuat elemen menampilkan gambar melalui CSS adalah dengan background-imageproperti, dan setiap elemen hanya dapat memiliki satu gambar latar belakang. Dua elemen mana yang Anda pilih dan bagaimana Anda memposisikannya terserah Anda. Ada banyak cara bagaimana Anda dapat memposisikan satu elemen HTML di atas yang lain.

Berikut adalah teknik yang baik untuk menampilkan gambar overlay yang dipusatkan dengan latar belakang semi-transparan di atas tautan gambar:

HTML

<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>

CSS

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;
}

Inilah Teknik JQuery dengan latar semi-transparan.

HTML

<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>

CSS

/** 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();
});