Images - Pink Overlay on Hover

jessjessanders
Excursionist
25 0 5

Hi there, 

I am looking to create a hover effect on my images, creating a color overlay when the mouse is hovering on it, and disappearing once the mouse hovers off.
If there is CSS I can use to do this, I'd love to know what it is. 

Website: https://sharnie-c ocks.myshopify.com/       ---> (no spaces in URL)
Password: reiffa
Section: 'Choose a service which best suits you!'  ---> The 3 images displayed in a row 

Any help would be appreciated!

0 Likes
Natztech
Explorer
150 32 27

please add me as staff member

Want to theme customize Hire us.
If helpful then please Like and Accept Solution

E-mail :natztech2312@gmail.com
0 Likes
jessjessanders
Excursionist
25 0 5

I don't feel comfortable doing that

0 Likes
Natztech
Explorer
150 32 27

then how can i give you solution?

Want to theme customize Hire us.
If helpful then please Like and Accept Solution

E-mail :natztech2312@gmail.com
0 Likes
jessjessanders
Excursionist
25 0 5

Are you able to inspect the CSS at all?
I would be more than happy to apply the code myself

0 Likes
Natztech
Explorer
150 32 27

please place this code that end of theme.scss

 

.image-overlay {
    position: absolute;
    background-color: #ffc1d7;
   width: 100%;
    height: 100%;
    top: 0;
    opacity: 0;
    transition: 0.35s;
}

.custom__item-inner:hover .image-overlay{opacity:0.4;}

 

go to section -> collection-template.liquid and try to find out this class which is selected in the screenshot and place below code

 

Screenshot (8).pngScreenshot (9).png

Screenshot (10).png

 Please this add new div image-overlay 

Want to theme customize Hire us.
If helpful then please Like and Accept Solution

E-mail :natztech2312@gmail.com
0 Likes
jessjessanders
Excursionist
25 0 5

Thanks for that. 

I have add the CSS to theme. 

Within sections, I have done the following: 

<div class="custom__block-image-container" style="padding-top:{{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100}}%">
{% assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="custom__block-image lazyload"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
alt="{{ block.settings.image.alt | escape }}">


<div class="image-overlay" style= "
position: absolute;
background-color:#ffc1d7;
/* padding: 12px; */
width:100%;
height:100%;
top:0;
opacity: 0.4;
transition: 0.35s;”>





It is not giving the desired effect, so I am doing something wrong here. 
Let me know what you think

0 Likes