-
Posts
-
Hi Everyone. I need to create a graphic like the one on this link, I need it t change the image on mouseover and that’s not native to Enfold, I need to do this on an enfold site.
Go to the link and page down past the first text block and you’ll see the effect.
Also has to be full width.Anyone got some custom html that will do the job or any other suggestions, plugins?
Thanks in anticipation. I have yet to find anything I can’t do in Enfold but this one has got me.
Update: I have tried some code in this. It’s almost worked. Needs tweaking, hoping admins can help me out.
Anyone here’s the code.I have placed this in Code box in a three block Grid. Set all margins to zero. I can get one box to work but then I clone it and change the url of the graphics and they don’t change, it shows the same graphic as the cloned one. Also there is a gap between the images and that needs to go.
Here’s the code I tried
Box 1
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Change Image on Hover in CSS</title>
<style>
.card {
width: 100%;
height: 500px;
background: url(https://trevfisher.com/bvv/wp-content/uploads/2021/03/BBV_Surgery_Categoria-min.jpg) no-repeat;
margin: 0px;
}
.card:hover {
background: url(https://trevfisher.com/bvv/wp-content/uploads/2021/03/BBV_Surgery_BW_02-min.jpg) no-repeat;
}
</style>
</head>
<body>
<div class=”card”></div>
</body>
</html>Box 2
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Change Image on Hover in CSS</title>
<style>
.card {
width: 100%;
height: 500px;
background: url(https://trevfisher.com/bvv/wp-content/uploads/2021/03/BBV_Cellular_Rejuvenation_Categoria-min.jpg) no-repeat;
margin: 0px;
}
.card:hover {
background: url(https://trevfisher.com/bvv/wp-content/uploads/2021/03/BBV_Surgery_BW_02-min.jpg) no-repeat;
}
</style>
</head>
<body>
<div class=”card”></div>
</body>
</html>This is on my test server.
- You must be logged in to reply to this topic.