3 replies · opened Aug 19, 2019
I would love to create the opposite effect to what most Canvas portfolios implement with a CSS hover effect.
Is there an HTML/CSS solution wherein an image could be first obscured (or darkened), then revealed when rolled over?
I would really want to avoid the old method of creating two images, and doubling my production time.
Please let me know if anyone has a clever solution.
Thanks in advance,
~ John
(Hopefully, my example illustrates what I'm hoping to do)
Hello,
Consider using the following CSS Code:
.portfolio-image:after {
position: absolute;
content: '';
opacity: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
body:not(.device-touch):not(.device-sm):not(.device-xs) .portfolio-image:after {
-webkit-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;
}
.portfolio-item:hover .portfolio-image:after { opacity: 0; }
.portfolio-overlay {
opacity: 0;
background-color: transparent;
}
.portfolio-item:hover .portfolio-overlay { opacity: 1; }This should give you the effect you need for the Portfolio Images.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Thank you, so much for the solution.
I continued trying things before your reply, and found a "brute force" solution. Hopefully, there will be no problems down the road, in which case, I'll definitely implement your suggested solution. For now, I thought to just lower the opacity of the ".portfolio-item .portfolio-image", by letting the background color show through...
.portfolio-item .portfolio-image,
.portfolio-item .portfolio-image a,
.portfolio-item .portfolio-image img {
display: block;
border-radius: 6px;
width: 100%;
opacity: .9;
height: auto;
} Then, added a ":hover" for the .portfolio-image (and it's "a" and "src" attributes) to go along with the .portfolio-overlay ":hover" ...
.portfolio-item:hover .portfolio-image a,
.portfolio-item:hover .portfolio-image src,
.portfolio-item:hover .portfolio-image ,
.portfolio-item:hover .portfolio-overlay,
.iportfolio:hover .portfolio-overlay { opacity: 1; } It seems to be working fine for now.
Thanks again!
Hello,
Glad that your issues were resolved.
Do let us know if we can help you with anything else or if you find any further issues with Canvas.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard