Hover Switches Image
-
Hello! Here’s one I REALLY hope I can accomplish, because it would definitely be cool.
I would like to have the safety signs (top of the sidebar) switch from:
to
Possibly different versions, later, that also reflect their sequence in the 4 of 4 content variations. I’ve tried to make a couple of things work, to no avail. The sidebar images are setup to change opacity, so I would need to override that to make it work but maintain those images’ opacity change. Can this be accomplished fully, or even in part?
Than you!
The blog I need help with is: (visible only to logged in users)
-
*Thank, is what I meant, there. With this whole inquiry, I mean to switch the two images when you hover over them with the cursor. Sorry, forgot to mention that outside of the somewhat codified title. LOL
-
If you’re referring to the image in your sidebar, you might like to try a gallery widget set to slideshow mode. That would rotate through your selected images.
-
Hey, Kathryn!
Hmmm…Now, there’s a VERY cool idea!
I already have slideshows setup on the homepage, and a couple of others, all going in the Main section.
For those pages that have active slideshows going, I would like to have these Safety Sign images setup to change when hovered over; just to acheive the effect and minimize the activity on the page.
Those slideshows, that are active, are fairly large. And, because of their placement at the top of the sidebar, there would likely be too much activity going on for those pages with active ones rolling.
Your idea would DEFINITELY be cool for the pages that don’t have the active slideshows, which is the majority of them, but the hover switch is still a necessity I’m afraid. Can I accomplish this desired effect?
Even if it combines with the opacity hover effect, it would be good for those images and their specific purpose.
Thanks for assisting, work this one!
-
-
^My mind’s eye is picturing the two slideshows out of sync in their rotations, which would be problematic. If they rolled in sync, it may work. I will have to experiment, but would still like to know the basic code to switch an image when hovered over; I may use it elsewhere. :)
-
Real image swaps generally require JavaScript, but that code isn’t allowed on WordPress.com.
You could experiment a workaround using a background image in CSS – there’s a tutorial here that you can play around with:
-
-
Hey, Kathryn. Gave this a shot, hoping to affect just that image, but got nowhere. If that image has another ID# (like #image-17), because it’s an image widget, I don’t know it. Can you possibly tell me where I went wrong?
img.wp-image-7836 {
width: 600px;
height: 172px;
display: rectangle;
background-image: url(‘https://hudsonchemicalsdotcom.files.wordpress.com/2016/02/safetyoverfirstorng1.png’);
}img.wp-image-7836:hover {
background-image: url(‘https://hudsonchemicalsdotcom.files.wordpress.com/2016/02/safetyminusfirstorng1.png’);
} -
Hi there!
I had some trouble getting that background-image method to work without any problems in both Chrome and Firefox so have another method (found here: http://jsfiddle.net/gd8ba/light/) that I’ve tested and will work if you’d like to try it.
First, remove the Image Widget and add a Text Widget to your Sidebar with the following in the Text Widget’s Content box:
<a class="imghoverswap" href="#"><img src="https://hudsonchemicalsdotcom.files.wordpress.com/2016/02/safetyoverfirstorng1.png" /><img src="https://hudsonchemicalsdotcom.files.wordpress.com/2016/02/safetyminusfirstorng1.png" /></a>Then go to Customize > CSS and add this:
.imghoverswap img:last-child{display:none} .imghoverswap:hover img:first-child{display:none} .imghoverswap:hover img:last-child{display:inline-block}Save & refresh your site. How’s that? :)
-
TOO COOL!!! Thanks so much for the response, Sarah! I’m way too scatter-brained on a med I have to take. Can’t wrap my head around anything, today, but will definitely give it a shot when I can. :D
-
-
You’re welcome! Once you give it a try, let me know if you hit any trouble and I’ll take a look.
Hail Toast!
Does this mean you found my toast newsletter? Haha. :)
-
Thanks, and yes…I’m fully Toast Aware, now that I’ve visited that site! Never knew there was so much going on in the Toasters Community… :D
-
-
-
-
Got the front page all setup, like it will be for the others. Looks and works great!!!!!! :D
The last message was after adding the basic setup, and seeing that it did do the desired Web Magic I’d hoped for. I’m going to do the same for the remaining Safety Signs, eventually, because I straight-up ran out of mental steam. Lol
Many thanks, Ambassador Blackstock.
Hail Toast!
Marc of Hudson
-
- The topic ‘Hover Switches Image’ is closed to new replies.
WordPress.com Forums 