Hover on simple Images
-
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! -
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"
-
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.... -
-
Try this:
.img .caption{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
-
YES!
GREAT! -
Try this simple....Image Hover Sample
Dell
-
@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
-
@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!
-
@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!
-
-
This 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
-
This post is deleted! -
-
This 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
-
This post is deleted!
I don't answer or check forum DMs, please just post on the forum.
Before you post:
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. Now see if your problem solved itself
5. Go here, see if your problem is listed here:
Troubleshooting
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it