question abt image hover effect on wordpress.com site with no plugins!
i’m looking to create a gallery with pictures of team members with a hover effect that adds a shadow and text. how would i go about this? all the tutorials i’ve seen have plugins but this site doesn’t allow them! any help would be appreciated
AFAIK, there’s no way to add custom code/css in [wp.com]) free or personal plans.
It’s quite simple with css.
First find the .selector name, you can do this by inspecting the element or setting the .selector name yourself.
Use a background drop shadow generator like [this](https://html-css-js.com/css/generator/box-shadow/) for ease
**Adds general shadow**
.selectorContainer {
-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.15);
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.15);
}
**Adds hover shadow**
.selectorContainer:hover {
-webkit-box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.25);
box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.25);
}
This is an overly simplistic way to start, there’s no transition animations or anything that hard to comprehend, just a simple shadow change effect on hover of the css class.
This might help [https://tobiasahlin.com/blog/how-to-animate-box-shadow/](https://tobiasahlin.com/blog/how-to-animate-box-shadow/)
To show text on hover you would have to add this with it’s own class so you can add an id or class to the paragraph element or wrap it inside of a div.
So if you have your text “Generic Text” with a selector name of ‘.myText’ hidden, and you want to show it on hover, you could do something like this;
**Hide text**
.myText {
display:none;
}
**Show text on hover**
.selectorContainer:hover .myText {
display:block;
}
Again, this is oversimplified, there’s no animations or transitions, and is about as basic css as you can get and will show the text when you hover the container you’ve previously applied the hover shadow effect too.