Title: Image hover
Last modified: September 1, 2016

---

# Image hover

 *  [imeon](https://wordpress.org/support/users/imeon/)
 * (@imeon)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/image-hover-5/)
 * Hi,
 * Is it possible to have an image that when hovered over will allow text to appear?
   Specifically in this type of way [http://tomanders.com/](http://tomanders.com/)?
 * I have a photo on my website and I’m guessing its under the ‘Show Caption’ settings
   with the ‘on hover’ option selected? If this is the correct way of doing it, 
   where do I insert the text caption?
 * Thanks.
 * [https://wordpress.org/plugins/beaver-builder-lite-version/](https://wordpress.org/plugins/beaver-builder-lite-version/)

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Contributor [Ben Carlo](https://wordpress.org/support/users/hinampaksh/)
 * (@hinampaksh)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/image-hover-5/#post-7656211)
 * Hey Imeon,
 * Thanks for getting in touch!
 * That is correct! The caption can be placed while you’re selecting an image from
   the Media Library. Check the screenshot below for reference.
    [http://imgur.com/a/QvaBJ](http://imgur.com/a/QvaBJ)
 * Hope this helps!
 * Ben
 *  Thread Starter [imeon](https://wordpress.org/support/users/imeon/)
 * (@imeon)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/image-hover-5/#post-7656344)
 * Hey Ben,
 * Thanks for the response, now I know where the caption setting is!
 * Is there a way to have the text appear in the middle of the image like the link
   I showed above?
    I’m not a fan of having these large images with a small box 
   appearing at the bottom in thin text.
 * Thanks!
 *  Plugin Contributor [Ben Carlo](https://wordpress.org/support/users/hinampaksh/)
 * (@hinampaksh)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/image-hover-5/#post-7656369)
 * Hey Imeon,
 * The only way to achieve that is via custom CSS. Try adding the snippet below 
   and see if it’s what you’re looking for. You can place it under **Tools > Layout
   CSS/JS > CSS** so it only gets applied to the page you put it on.
 *     ```
       .fl-photo-content:before {
         display: block;
         content: '';
         opacity: 0;
         position: absolute;
         top: 0;
         left: 0;
         bottom: 0;
         right: 0;
         background: rgba(0,0,0,0.7);
         -webkit-transition: opacity 0.3s ease-in;
         -moz-transition: opacity 0.3s ease-in;
         transition: opacity 0.3s ease-in;
       }
       .fl-photo-content:hover:before {
         opacity: 1;
       }
       .fl-photo-caption {
         top: 50%;
         margin-top: -10px;
         font-size: 20px;
         background: none;
         bottom: auto;
       }
       ```
   
 * Hope this helps!
 * Ben

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Image hover’ is closed to new replies.

 * ![](https://ps.w.org/beaver-builder-lite-version/assets/icon-256x256.png?rev=
   2361183)
 * [Beaver Builder Page Builder - Drag and Drop Website Builder](https://wordpress.org/plugins/beaver-builder-lite-version/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/beaver-builder-lite-version/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/beaver-builder-lite-version/)
 * [Active Topics](https://wordpress.org/support/plugin/beaver-builder-lite-version/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/beaver-builder-lite-version/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/beaver-builder-lite-version/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [Ben Carlo](https://wordpress.org/support/users/hinampaksh/)
 * Last activity: [9 years, 10 months ago](https://wordpress.org/support/topic/image-hover-5/#post-7656369)
 * Status: not resolved