Side by Side Images with Hover Effect using HTML

New Member
24 0 0

Hi All,

I am hoping for some help to figure out how to achieve an effect I am after for my home page with a custom HTML section.

Id like to place 2 images side by side (with a negligible gap between them) and have a hover effect which creates a very faint black overlay with a low opacity. Id also like both these images to have a slight 'grow' or 'zoom' effect.

In addition, Id like them both to have hyperlinks to products.

Im really struggling with this and have so far only managed to come up with the code for one image with a slightly black overlay. I dont have any background with HTML/CSS so am working purely off basic intution. I would really appreciate anybody's assistance. Thank you

<html>
<head>
<style>
.container {
  position: relative;
  width: 100%;
}

.image {
  display: inline-block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #000000;
}

.container:hover .overlay {
  opacity: 0.4;
}
</style>
</head>
<body>

<div class="container">
  <img src="https://cdn.shopify.com/s/files/1/1924/0141/files/Home_Page_Isaac_Image.png?2037434886243300914" alt="Le Tricolore Smartwatch"  class="image">
  <div class="overlay">
  </div>
</div>

</body>
</html>

0 Likes
Shopify Expert
2674 65 664

Hi Isac,

check this fiddle

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
New Member
24 0 0

Hi Tim

Thats really kind of you, thank you very much, I really appreciate your time, thats got the result I envisaged.

A couple of small queries. 

1. How would I create a little bit of white space in between the two images?

2. Could I also include an element of code to make the images 2 separate hyperlinks?

3. The hardest question out of the lot, is there any way I can make this HTML responsive to make the two images stack one on top of the other when looking at the website on the mobile? This would be to preserve the current dimensions of the 2 images as on the mobile when left side by side, they become quite small

Again, I really appreciate your generosity.

0 Likes
Shopify Expert
2674 65 664

Like this: https://jsfiddle.net/v9wvnkx2/7/

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
New Member
24 0 0

Hi Tim,

Again, this is really kind of you, thank you very much, you've given me a great solution. 

I really appreciate it.

0 Likes
New Member
2 0 0

Hey Tim

I've just come across this thread and I'm trying to do the same thing but with multiple images (Around 4 or 5). 

I've tried replicating it but I'm not sure what to do to get them inline - it doesn't seem to work. Any advice?

 

Thanks for your help!

Jo

0 Likes