Hover on simple Images
-
wrote on Feb 7, 2017, 12:38 PM last edited by
hi armin, another question: how can i ad hover-effects to pictures that are no project-thumbnails? i want pictures on a simple page to become a bit darker and show the caption when hovering. would be great if you or anybody else could help.
thanks! -
Global Moderatorwrote on Feb 10, 2017, 1:57 PM last edited by arminunruh Feb 10, 2017, 8:58 AM
hey, you can do this with custom css!
.img img{ transition: all 300ms ease; } .img:hover img{ filter: brightness(0.9); } .img .caption{ opacity: 0; transition: opacity 300ms ease; } .img:hover .caption{ opacity: 1; }
Css is not so hard to do! There are little video courses about it like the one I recommend on khan university in the documentation section "custom css"
-
wrote on Feb 13, 2017, 10:41 PM last edited by
nice! thank you.
only the "caption" needs to be removed still. it appears underneath the pic but i would like to have it in the center of it.
...i tried to understand css a bit but i couldnt't find a way to solve this problem.... -
wrote on Feb 13, 2017, 10:48 PM last edited by
-
Try this:
.img .caption{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
-
wrote on Feb 14, 2017, 4:50 PM last edited by
YES!
GREAT! -
wrote on Jul 7, 2017, 5:24 AM last edited by
Try this simple....Image Hover Sample
Dell
-
hey, you can do this with custom css!
.img img{ transition: all 300ms ease; } .img:hover img{ filter: brightness(0.9); } .img .caption{ opacity: 0; transition: opacity 300ms ease; } .img:hover .caption{ opacity: 1; }
Css is not so hard to do! There are little video courses about it like the one I recommend on khan university in the documentation section "custom css"
wrote on Jun 1, 2018, 3:34 PM last edited by@arminunruh said in Hover on simple Images:
hey, you can do this with custom css!
.img img{ transition: all 300ms ease; } .img:hover img{ filter: brightness(0.9); } .img .caption{ opacity: 0; transition: opacity 300ms ease; } .img:hover .caption{ opacity: 1; }
Css is not so hard to do! There are little video courses about it like the one I recommend on khan university in the documentation section "custom css"
Hi Armin,
Is there a way to modify this CSS so that it only applies to the images on a page that contain links (rather than all images)?
Thanks!
Norman -
Dear @Organstudio
that should work:
.img a img{ transition: all 300ms ease; } .img:hover a img{ filter: brightness(0.9); } .img a .caption{ opacity: 0; transition: opacity 300ms ease; } .img:hover a .caption{ opacity: 1; }
Let me know!
Marius
-
Dear @Organstudio
that should work:
.img a img{ transition: all 300ms ease; } .img:hover a img{ filter: brightness(0.9); } .img a .caption{ opacity: 0; transition: opacity 300ms ease; } .img:hover a .caption{ opacity: 1; }
Let me know!
Marius
wrote on Jun 3, 2018, 3:15 PM last edited by@mariusjopen said in Hover on simple Images:
.img a img{
transition: all 300ms ease;
}.img:hover a img{
filter: brightness(0.9);
}.img a .caption{
opacity: 0;
transition: opacity 300ms ease;
}.img:hover a .caption{
opacity: 1;
}Thanks Marius – works perfectly!
-
Glad to hear!
-
wrote on May 25, 2019, 10:59 AM last edited by
@arminunruh said in Hover on simple Images:
.img img{
transition: all 300ms ease;
}.img:hover img{
filter: brightness(0.9);
}.img .caption{
opacity: 0;
transition: opacity 300ms ease;
}.img:hover .caption{
opacity: 1;
}Hello Armin
This post is just what I am looking for, but there is something that I am not doing in the right way. I add the code to my Custom CSS and something is working because when I put the mouse over I can see the darkening of the image but I can not see the caption. Tha code that I put is:
.img img{ transition: all 300ms ease; } .img:hover img{ filter: brightness(0.9); } .img .caption{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .img:hover .caption{ opacity: 1; }
The only thing that I need is to see the caption over the image at the center of the photo that is not a project thumbail. This one, for example is in a Category and inside a project too. The darkening works in every situation but I can not see the caption.
Thanks!
-
-
wrote on May 27, 2019, 9:13 AM last edited byThis post is deleted!
-
Dear @Subliner
can you tell we which image you want to have the effect applied to and which piece of text you want to appear in it?Best!
Marius
-
wrote on May 30, 2019, 1:53 PM last edited by Subliner May 30, 2019, 9:55 AMThis post is deleted!
-
-
Dear @Subliner
can you tell we which image you want to have the effect applied to and which piece of text you want to appear in it?Best!
Marius
wrote on Jun 4, 2019, 1:58 PM last edited byThis post is deleted! -
Dear @mathias
but you added a caption for the image?
You need to add the caption by selecting an image and then click on edit caption.Best!
Marius
-
Dear @mathias
but you added a caption for the image?
You need to add the caption by selecting an image and then click on edit caption.Best!
Marius
wrote on Jun 6, 2019, 10:47 PM last edited byThis post is deleted!
I also code custom websites or custom Lay features.
💿 Email me here: 💿
info@laytheme.com
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it