Onmouseover capabilities

sajecenter · Member · Apr 14, 2017 at 7:25 pm
Copy link

Add topic to favorites
I am trying to use make images that enlarge slightly when your mouse is on the image. Is there a way to do this in wordpress? Thanks!!
otpidusprime · Member · Apr 14, 2017 at 7:34 pm
Copy link
Hello @sajecenter,
Please provide the link to the site you need help with. This will help us give you a better answer.

Thanks!
sajecenter · Member · Apr 14, 2017 at 8:08 pm
Copy link
Yes of course! https://sajecenter.org/university-state-research-collaboratives?iframe=true&theme_preview=true
otpidusprime · Member · Apr 14, 2017 at 8:19 pm
Copy link
Alright, you can use this CSS to enlarge the image slightly when hovered:
```
img {
    transition: transform .3s ease;
}

img:hover {
    transform: scale(1.03);
}
```
NOTE: This will affect all the images on you site, if you want to just target specific set of images to enlarge on hover, then add a class to the images your want to hover using the HTML tab in the post editor like this:
<img src="image_location.jpeg" class="hover_enlarge" />
And then, use this CSS to enlarge only this image:
```
img.hover_enlarge {
    transition: transform .3s ease;
}

img.hover_enlarge:hover {
    transform: scale(1.03);
}
```
The class name “hover_enlarge” is just used as an example here. You can use any class name you like and then target that class name using CSS as shown above.

Hope this helps :)

NOTE: I noticed that you have removed the black admin bar from your WordPress.com site. It is against the Terms of Service of WordPress.

All WordPress.com users are required to maintain the Admin Bar (the dark bar that appears at the top of WordPress.com sites when logged in).

As written here: https://en.support.wordpress.com/custom-design/#frequently-asked-questions
So i would suggest you to add that admin bar back.

Thanks!
sajecenter · Member · Apr 23, 2017 at 3:46 am
Copy link
Hello again,

Thank you for your help! I am not sure how to add it back especially since I didn’t know I removed it!! haha Anyway you could give me further guidance on this? Thanks!!
otpidusprime · Member · Apr 25, 2017 at 2:11 pm
Copy link
@sajecenter
Copy and paste the codes again on the CSS Editor from the Site Customizer.

1. Go to My Site(s) → Customize(Beside the Themes option). This will open the site Customizer.
2. On the sidebar of the Customizer. Click on the CSS tab. Copy and paste the code on the editor area.

You can read more about editing CSS here:
https://en.support.wordpress.com/custom-design/editing-css/

No items found.