Image Hover Effect

question abt image hover effect on 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

  1. 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]( 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 [](

    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 {



    **Show text on hover**

    .selectorContainer:hover .myText {



    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.


This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer