CSS Transition on another class img:hover

I have a class with this :hover effect that gives the image color.
And I have this separate class that shows the '+' on :hover, but only when I hover this class. I want to have both :hover effects on one img:hover:

Code for the img:hover effect. (using b/w filter).

.og-grid li > a,
.og-grid li > a img
border: none;
outline: none;
display: block;
position: relative;
-webkit-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");


.og-grid li > a,
.og-grid li > a img:hover
-webkit-filter: grayscale(0%);
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");



Code for the + hover effect.

.viewmore
margin-left: 350px;
opacity: 0;
position: absolute;
z-index: 100;


.viewmore:hover
opacity: 100;
margin-top: 45px;
transition: all ease 0.9s;



HTML (want to apply this on all img in the grid) :
viewmore.png is the '+' img that fades in when I hover it.

<img src="img/viewmore.png" class="viewmore">
<ul id="og-grid" class="og-grid">

<li>
<a href="" data-largesrc="img/work/sunmoon.jpg" data-title="MoonSun Shades" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
<img src="img/work/sunmoon2.jpg" alt="img01"/>
</a>
</li>
</ul>


GIF:
https://gyazo.com/fe388835229cf2492a0188f2d29a12df

I want to use see them both at the same time when I hover the img.

1 Answer
1

The trick is to have the :hover pseudoclass on a parent element. When you hover the parent, you can then move one of the children.

:hover

I've reorganised your code a bit and introduced more semantic class names:

.view-more img.main
transition: all 1s ease;
display: block;
-webkit-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");


.view-more:hover img.main
-webkit-filter: grayscale(0%);
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");

.view-more
position: relative; /* needed for child absolute positioning */
display: inline-block;
overflow: hidden;

.view-more .button
right: 10px;
top: -80px;
position: absolute;
z-index: 100;
opacity: 0;
transition: all 1s ease;
border: 1px red solid;

.view-more:hover .button
top: 0;
opacity: 1;


<a href="#" class="view-more">
<img class="main" src="https://via.placeholder.com/350x150" alt="img01" width="200"/>
<img src="https://via.placeholder.com/50x50" class="button" width="50">
</a>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.