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.
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.
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>