Hover Effect on Gallery Images

Site URL: http://laurenkilbane.com

Hello,

I'm looking to add a hover effect to my block images, something that will create a color/opacity overlay on to the image when a visitor hovers over it. I have a caption displayed underneath that I want to leave visible at all times (so this overlay would be separate, just for the image). I've noticed it's especially hard to tell that these images are linked when viewing my site from a mobile device. Not sure if my template allows for customization like this, but any advice would be greatly appreciated.

Thanks!

Hello,

From looking at your page, it looks like all of the images are inserted using the inline image block. Here is a simple hover animation for your images that can be applied in the Custom CSS tab.

 .design-layout-inline img {
    transition: all .5s;
  }
  .design-layout-inline img:hover {
    transform: scale(1.05);
    filter: grayscale(100%);
	border: 5px solid hotpink; 
	
  }

This is a simple and effective animation. Transition timing and easing functions can be anything you'd like. You can look up different easing timing functions using cubic-bezier(dot)com. Copy and paste the timing function just after the ".5s" but before the ";". Although it is not required to add Cubic Easing and just use the default settings.

I used a transform "scale" animation that acts like a magnifier when the image is hovered but there are plenty of other transform properties that you can use -- try them out by swapping out "scale(1.05)" with other values or properties.

The filter and border options are some of the other pieces of the hover animation that can be used to help the item stand out a bit more. You can also look up all of the different filters you can use as well.

Hope this helps!

@Wolfsilon That worked perfectly... I can't thank you enough! You are the BEST.

On 4/27/2021 at 4:29 PM, Wolfsilon said:

Hello,

From looking at your page, it looks like all of the images are inserted using the inline image block. Here is a simple hover animation for your images that can be applied in the Custom CSS tab.

 .design-layout-inline img {
    transition: all .5s;
  }
  .design-layout-inline img:hover {
    transform: scale(1.05);
    filter: grayscale(100%);
	border: 5px solid hotpink; 
	
  }

This is a simple and effective animation. Transition timing and easing functions can be anything you'd like. You can look up different easing timing functions using cubic-bezier(dot)com. Copy and paste the timing function just after the ".5s" but before the ";". Although it is not required to add Cubic Easing and just use the default settings.

I used a transform "scale" animation that acts like a magnifier when the image is hovered but there are plenty of other transform properties that you can use -- try them out by swapping out "scale(1.05)" with other values or properties.

The filter and border options are some of the other pieces of the hover animation that can be used to help the item stand out a bit more. You can also look up all of the different filters you can use as well.

 

Hope this helps!

This is awesome! Is there any way to add text to this as well?

On 5/24/2023 at 6:57 AM, imdanielduncan said:

This is awesome! Is there any way to add text to this as well?

You mean add text over image? This code for Image Block - Inline Design. It supports Image caption so you can add any text