How to overlay images

Question

I want to overlay one image with another using CSS  An example of this is the first image  the background if you like  will be a thumbnail link of a product  with the link opening a lightbox   popup showing a larger version of the image    On top of this linked image I would like an image of a magnifying glass  to show people that the image can be clicked to enlarge it  apparently this isn t obvious without the magnifying glass

User · Answer

Here s a good technique to display an overlay image that is centered with a semi-transparent background over an image link   HTML   lt div class  image-container  gt       lt a class  link  href      gt             lt img class  image  src   img thumbnail png   gt           lt span class  overlay-image  gt  lt img src   img overlay png  gt  lt  span gt       lt  a gt       lt  div gt    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

User · Answer

Here s a JQuery Technique with semi-transparent background   HTML   lt html gt   lt head gt       lt link rel  stylesheet  href  css style css  type  text css  media  screen  title  no title  charset  utf-8  gt       lt title gt Image Gallery lt  title gt   lt  head gt   lt body gt       lt h1 gt Image Gallery lt  h1 gt        lt ul id  imageGallery  gt           lt li gt  lt a href  images refferal machine png  gt  lt img src  images refferal machine png  width  100  alt  Refferal Machine By Matthew Spiel  gt  lt  a gt  lt  li gt           lt li gt  lt a href  images space-juice png  gt  lt img src  images space-juice png  width  100  alt  Space Juice by Mat Helme  gt  lt  a gt  lt  li gt           lt li gt  lt a href  images education png  gt  lt img src  images education png  width  100  alt  Education by Chris Michel  gt  lt  a gt  lt  li gt           lt li gt  lt a href  images copy mcrepeatsalot png  gt  lt img src  images copy mcrepeatsalot png  width  100  alt  Wanted  Copy McRepeatsalot by Chris Michel  gt  lt  a gt  lt  li gt           lt li gt  lt a href  images sebastian png  gt  lt img src  images sebastian png  width  100  alt  Sebastian by Mat Helme  gt  lt  a gt  lt  li gt           lt li gt  lt a href  images skill-polish png  gt  lt img src  images skill-polish png  width  100  alt  Skill Polish by Chris Michel  gt  lt  a gt  lt  li gt           lt li gt  lt a href  images chuck png  gt  lt img src  images chuck png  width  100  alt  Chuck by Mat Helme  gt  lt  a gt  lt  li gt           lt li gt  lt a href  images library png  gt  lt img src  images library png  width  100  alt  Library by Tyson Rosage  gt  lt  a gt  lt  li gt           lt li gt  lt a href  images boat png  gt  lt img src  images boat png  width  100  alt  Boat by Griffin Moore  gt  lt  a gt  lt  li gt           lt li gt  lt a href  images illustrator foundations png  gt  lt img src  images illustrator foundations png  width  100  alt  Illustrator Foundations by Matthew Spiel  gt  lt  a gt  lt  li gt           lt li gt  lt a href  images treehouse shop jpg  gt  lt img src  images treehouse shop jpg  width  100  alt  Treehouse Shop by Eric Smith  gt  lt  a gt  lt  li gt       lt  ul gt        lt script src  http   code jquery com jquery-1 11 0 min js  type  text javascript  charset  utf-8  gt  lt  script gt       lt script src  js app js  type  text javascript  charset  utf-8  gt  lt  script gt   lt  body gt   lt  html gt    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       lt div id  overlay  gt  lt  div gt     var  image       lt img gt     var  caption       lt p gt  lt  p gt         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

User · Answer

One technique  suggested by this article  would be to do this    lt img style  background url thumbnail1 jpg   src  magnifying glass png    gt

User · Answer

Here is how I did it recently   Not perfect semantically  but gets the job done      lt div class  container  style  position  relative  gt   lt img style  z-index  32  left  8px  position  relative   alt  bottom image  src  images bottom-image jpg  gt   lt div style  z-index  100  left  72px  position  absolute  top  39px  gt   lt img alt  top image  src  images top-image jpg  gt  lt  div gt  lt  div gt

User · Answer

In CSS3  you can do the following    double-image       background-image  url images img1 png   url images img2 png       Took from Can I have multiple background images using CSS

User · Answer

If you re only wanting the magnifing glass on hover then you can use   a hover img   cursor  url glass cur       http   www javascriptkit com dhtmltutors csscursors shtml  If you want it there permanently you should probably either have it included in the original thumnail  or add it using JavaScript rather than adding it to the HTML  this is purely style and shouldn t be in the content    Let me know if you want help on the JavaScript side

User · Answer

I just got done doing this exact thing in a project  The HTML side looked a bit like this    lt a href   fullsize   class  gallerypic  title    gt     lt img src   thumbnail pic   height  90  width  140  alt   Gallery Photo   class  pic    gt     lt span class  zoom-icon  gt         lt img src   images misc zoom gif  width  32  height  32  alt  Zoom  gt     lt  span gt   lt  a gt    Then using 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      I left a lot of the sample in there on the CSS so you can see how I decided to do the style  Note I lowered the opacity so you could see through the magnifying glass   Hope this helps   EDIT  To clarify for your example - you could ignore the visibility hidden  and kill the  hover execution if you wanted  this was just the way I did it

User · Answer

Here s a JQuery Technique with semi-transparent background   HTML   lt html gt   lt head gt       lt link rel  stylesheet  href  css style css  type  text css  media  screen  title  no title  charset  utf-8  gt       lt title gt Image Gallery lt  title gt   lt  head gt   lt body gt       lt h1 gt Image Gallery lt  h1 gt        lt ul id  imageGallery  gt           lt li gt  lt a href  images refferal machine png  gt  lt img src  images refferal machine png  width  100  alt  Refferal Machine By Matthew Spiel  gt  lt  a gt  lt  li gt           lt li gt  lt a href  images space-juice png  gt  lt img src  images space-juice png  width  100  alt  Space Juice by Mat Helme  gt  lt  a gt  lt  li gt           lt li gt  lt a href  images education png  gt  lt img src  images education png  width  100  alt  Education by Chris Michel  gt  lt  a gt  lt  li gt           lt li gt  lt a href  images copy mcrepeatsalot png  gt  lt img src  images copy mcrepeatsalot png  width  100  alt  Wanted  Copy McRepeatsalot by Chris Michel  gt  lt  a gt  lt  li gt           lt li gt  lt a href  images sebastian png  gt  lt img src  images sebastian png  width  100  alt  Sebastian by Mat Helme  gt  lt  a gt  lt  li gt           lt li gt  lt a href  images skill-polish png  gt  lt img src  images skill-polish png  width  100  alt  Skill Polish by Chris Michel  gt  lt  a gt  lt  li gt           lt li gt  lt a href  images chuck png  gt  lt img src  images chuck png  width  100  alt  Chuck by Mat Helme  gt  lt  a gt  lt  li gt           lt li gt  lt a href  images library png  gt  lt img src  images library png  width  100  alt  Library by Tyson Rosage  gt  lt  a gt  lt  li gt           lt li gt  lt a href  images boat png  gt  lt img src  images boat png  width  100  alt  Boat by Griffin Moore  gt  lt  a gt  lt  li gt           lt li gt  lt a href  images illustrator foundations png  gt  lt img src  images illustrator foundations png  width  100  alt  Illustrator Foundations by Matthew Spiel  gt  lt  a gt  lt  li gt           lt li gt  lt a href  images treehouse shop jpg  gt  lt img src  images treehouse shop jpg  width  100  alt  Treehouse Shop by Eric Smith  gt  lt  a gt  lt  li gt       lt  ul gt        lt script src  http   code jquery com jquery-1 11 0 min js  type  text javascript  charset  utf-8  gt  lt  script gt       lt script src  js app js  type  text javascript  charset  utf-8  gt  lt  script gt   lt  body gt   lt  html gt    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       lt div id  overlay  gt  lt  div gt     var  image       lt img gt     var  caption       lt p gt  lt  p gt         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

User · Answer

If you re only wanting the magnifing glass on hover then you can use   a hover img   cursor  url glass cur       http   www javascriptkit com dhtmltutors csscursors shtml  If you want it there permanently you should probably either have it included in the original thumnail  or add it using JavaScript rather than adding it to the HTML  this is purely style and shouldn t be in the content    Let me know if you want help on the JavaScript side

User · Answer

Unless you use the  lt img gt  tag  which displays an image by itself  you will not be able to achieve this with pure CSS alone  You will also need TWO HTML elements as well - one for each picture  This is because the only way you can make an element display a picture via CSS is with the background-image property  and every element can have only one background image  Which two elements you choose and how you position them is up to you  There are many ways how you can position one HTML element above another

User · Answer

If you re only wanting the magnifing glass on hover then you can use   a hover img   cursor  url glass cur       http   www javascriptkit com dhtmltutors csscursors shtml  If you want it there permanently you should probably either have it included in the original thumnail  or add it using JavaScript rather than adding it to the HTML  this is purely style and shouldn t be in the content    Let me know if you want help on the JavaScript side

User · Answer

A simple way of doing that with CSS   only without modifying the content   with additional tags is shown here    with code and example     http   soukie net 2009 08 20 typography-and-css  example   This works  as long as the parent element is not using static positioning  Simply setting it to relative positioning does the trick  Also  IE  lt 8 don t support the  before selector or content

User · Answer

Here is how I did it recently   Not perfect semantically  but gets the job done      lt div class  container  style  position  relative  gt   lt img style  z-index  32  left  8px  position  relative   alt  bottom image  src  images bottom-image jpg  gt   lt div style  z-index  100  left  72px  position  absolute  top  39px  gt   lt img alt  top image  src  images top-image jpg  gt  lt  div gt  lt  div gt

User · Answer

You might want to check out this tutorial     http   www webdesignerwall com tutorials css-decorative-gallery   In it the writer uses an empty span element to add an overlaying image  You can use jQuery to inject said span elements  if you d like to keep your code as clean as possible  An example is also given in the aforementioned article   Hope this helps   -Dave

User · Answer

Here s a good technique to display an overlay image that is centered with a semi-transparent background over an image link   HTML   lt div class  image-container  gt       lt a class  link  href      gt             lt img class  image  src   img thumbnail png   gt           lt span class  overlay-image  gt  lt img src   img overlay png  gt  lt  span gt       lt  a gt       lt  div gt    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

User · Answer

One technique  suggested by this article  would be to do this    lt img style  background url thumbnail1 jpg   src  magnifying glass png    gt

User · Answer

I just got done doing this exact thing in a project  The HTML side looked a bit like this    lt a href   fullsize   class  gallerypic  title    gt     lt img src   thumbnail pic   height  90  width  140  alt   Gallery Photo   class  pic    gt     lt span class  zoom-icon  gt         lt img src   images misc zoom gif  width  32  height  32  alt  Zoom  gt     lt  span gt   lt  a gt    Then using 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      I left a lot of the sample in there on the CSS so you can see how I decided to do the style  Note I lowered the opacity so you could see through the magnifying glass   Hope this helps   EDIT  To clarify for your example - you could ignore the visibility hidden  and kill the  hover execution if you wanted  this was just the way I did it

User · Answer

You might want to check out this tutorial     http   www webdesignerwall com tutorials css-decorative-gallery   In it the writer uses an empty span element to add an overlaying image  You can use jQuery to inject said span elements  if you d like to keep your code as clean as possible  An example is also given in the aforementioned article   Hope this helps   -Dave

User · Answer

One technique  suggested by this article  would be to do this    lt img style  background url thumbnail1 jpg   src  magnifying glass png    gt

User · Answer

I just got done doing this exact thing in a project  The HTML side looked a bit like this    lt a href   fullsize   class  gallerypic  title    gt     lt img src   thumbnail pic   height  90  width  140  alt   Gallery Photo   class  pic    gt     lt span class  zoom-icon  gt         lt img src   images misc zoom gif  width  32  height  32  alt  Zoom  gt     lt  span gt   lt  a gt    Then using 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      I left a lot of the sample in there on the CSS so you can see how I decided to do the style  Note I lowered the opacity so you could see through the magnifying glass   Hope this helps   EDIT  To clarify for your example - you could ignore the visibility hidden  and kill the  hover execution if you wanted  this was just the way I did it

User · Answer

Unless you use the  lt img gt  tag  which displays an image by itself  you will not be able to achieve this with pure CSS alone  You will also need TWO HTML elements as well - one for each picture  This is because the only way you can make an element display a picture via CSS is with the background-image property  and every element can have only one background image  Which two elements you choose and how you position them is up to you  There are many ways how you can position one HTML element above another

User · Answer

You might want to check out this tutorial     http   www webdesignerwall com tutorials css-decorative-gallery   In it the writer uses an empty span element to add an overlaying image  You can use jQuery to inject said span elements  if you d like to keep your code as clean as possible  An example is also given in the aforementioned article   Hope this helps   -Dave

User · Answer

Unless you use the  lt img gt  tag  which displays an image by itself  you will not be able to achieve this with pure CSS alone  You will also need TWO HTML elements as well - one for each picture  This is because the only way you can make an element display a picture via CSS is with the background-image property  and every element can have only one background image  Which two elements you choose and how you position them is up to you  There are many ways how you can position one HTML element above another

User · Answer

In CSS3  you can do the following    double-image       background-image  url images img1 png   url images img2 png       Took from Can I have multiple background images using CSS

User · Answer

If you re only wanting the magnifing glass on hover then you can use   a hover img   cursor  url glass cur       http   www javascriptkit com dhtmltutors csscursors shtml  If you want it there permanently you should probably either have it included in the original thumnail  or add it using JavaScript rather than adding it to the HTML  this is purely style and shouldn t be in the content    Let me know if you want help on the JavaScript side

User · Answer

All we want is parent above child  This is how you do it   You put img into span  set z-index  amp  position for both elements  and extra display for span  Add hover to span so you can test it and you got it    HTML    lt span gt  lt img src   images   gt  lt  span gt    CSS  span img       position relative      z-index -1    span       position relative      z-index initial      display inline-block    span hover       background-color  000

User · Answer

You might want to check out this tutorial     http   www webdesignerwall com tutorials css-decorative-gallery   In it the writer uses an empty span element to add an overlaying image  You can use jQuery to inject said span elements  if you d like to keep your code as clean as possible  An example is also given in the aforementioned article   Hope this helps   -Dave

User · Answer

A simple way of doing that with CSS   only without modifying the content   with additional tags is shown here    with code and example     http   soukie net 2009 08 20 typography-and-css  example   This works  as long as the parent element is not using static positioning  Simply setting it to relative positioning does the trick  Also  IE  lt 8 don t support the  before selector or content

User · Answer

Here is how I did it recently   Not perfect semantically  but gets the job done      lt div class  container  style  position  relative  gt   lt img style  z-index  32  left  8px  position  relative   alt  bottom image  src  images bottom-image jpg  gt   lt div style  z-index  100  left  72px  position  absolute  top  39px  gt   lt img alt  top image  src  images top-image jpg  gt  lt  div gt  lt  div gt

User · Answer

Here is how I did it recently   Not perfect semantically  but gets the job done      lt div class  container  style  position  relative  gt   lt img style  z-index  32  left  8px  position  relative   alt  bottom image  src  images bottom-image jpg  gt   lt div style  z-index  100  left  72px  position  absolute  top  39px  gt   lt img alt  top image  src  images top-image jpg  gt  lt  div gt  lt  div gt

User · Answer

I just got done doing this exact thing in a project  The HTML side looked a bit like this    lt a href   fullsize   class  gallerypic  title    gt     lt img src   thumbnail pic   height  90  width  140  alt   Gallery Photo   class  pic    gt     lt span class  zoom-icon  gt         lt img src   images misc zoom gif  width  32  height  32  alt  Zoom  gt     lt  span gt   lt  a gt    Then using 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      I left a lot of the sample in there on the CSS so you can see how I decided to do the style  Note I lowered the opacity so you could see through the magnifying glass   Hope this helps   EDIT  To clarify for your example - you could ignore the visibility hidden  and kill the  hover execution if you wanted  this was just the way I did it

User · Answer

All we want is parent above child  This is how you do it   You put img into span  set z-index  amp  position for both elements  and extra display for span  Add hover to span so you can test it and you got it    HTML    lt span gt  lt img src   images   gt  lt  span gt    CSS  span img       position relative      z-index -1    span       position relative      z-index initial      display inline-block    span hover       background-color  000

User · Answer

Unless you use the  lt img gt  tag  which displays an image by itself  you will not be able to achieve this with pure CSS alone  You will also need TWO HTML elements as well - one for each picture  This is because the only way you can make an element display a picture via CSS is with the background-image property  and every element can have only one background image  Which two elements you choose and how you position them is up to you  There are many ways how you can position one HTML element above another

User · Answer

One technique  suggested by this article  would be to do this    lt img style  background url thumbnail1 jpg   src  magnifying glass png    gt

[html] How to overlay images

HTML

CSS

Examples related to html

Examples related to css