Title: hover effect Last modified: November 3, 2017 --- # hover effect * Resolved [ppauloff](https://wordpress.org/support/users/ppauloff/) * (@ppauloff) * [8 years, 7 months ago](https://wordpress.org/support/topic/hover-effect-14/) * hello, it’s me again (sorry for it). * i’d like to know if there’s a way to make hover effect on each image in the grid… something like that [http://www.olimpiazagnoli.com](http://www.olimpiazagnoli.com) i’ve tried to add css to the single image’s properties and then customize the css but i’m not really great in this kind of things! * thanks in advance, and once again, thanks for the marvellous work with tha plugin and the support too - This topic was modified 8 years, 7 months ago by [ppauloff](https://wordpress.org/support/users/ppauloff/). * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fhover-effect-14%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 15 replies - 1 through 15 (of 19 total) 1 [2](https://wordpress.org/support/topic/hover-effect-14/page/2/?output_format=md) [→](https://wordpress.org/support/topic/hover-effect-14/page/2/?output_format=md) * Plugin Author [Kerry](https://wordpress.org/support/users/bluenotes/) * (@bluenotes) * [8 years, 7 months ago](https://wordpress.org/support/topic/hover-effect-14/#post-9648016) * Basically it would look like the following: * ``` .bne-gallery-masonry-wrapper .gallery-single:hover:after { content: ""; position: absolute; top: 13px; left: 15px; right: 15px; bottom: 13px; background:red; z-index: 9; } ``` * You added a padding of 13/15 to the images on your site so the above reflects that. However, there is no caption included with the masonry grid so you won’t have text displayed over the color. * This is planned to be added in a later update but not in the near term. * Thread Starter [ppauloff](https://wordpress.org/support/users/ppauloff/) * (@ppauloff) * [8 years, 7 months ago](https://wordpress.org/support/topic/hover-effect-14/#post-9648105) * perfect, thank you! what kind of content should i insert inside the code? and should i have to do this for every gallery image? * (i’m sorry for the extreme dumb questions) * thanks again * Plugin Author [Kerry](https://wordpress.org/support/users/bluenotes/) * (@bluenotes) * [8 years, 7 months ago](https://wordpress.org/support/topic/hover-effect-14/#post-9648831) * Nothing, the content:”” is just required to use :before / :after in CSS. Since the masonry part of the gallery does not use the image caption, there won’t be any text overlaid * Thread Starter [ppauloff](https://wordpress.org/support/users/ppauloff/) * (@ppauloff) * [8 years, 7 months ago](https://wordpress.org/support/topic/hover-effect-14/#post-9650201) * ok, thank you! * i’ve tried the css you made but this made every image with red hover effect, how can i make them different? every image with a different color? * Plugin Author [Kerry](https://wordpress.org/support/users/bluenotes/) * (@bluenotes) * [8 years, 7 months ago](https://wordpress.org/support/topic/hover-effect-14/#post-9650877) * You would need to use nth-child rules. Which would allow you to cycle the colors after each one. For example: * ``` .bne-gallery-masonry-wrapper .gallery-single:hover:after { content: ""; position: absolute; top: 13px; left: 15px; right: 15px; bottom: 13px; z-index: 9; } .bne-gallery-masonry-wrapper .gallery-single:hover:nth-child(1n+1):after { background: red; } .bne-gallery-masonry-wrapper .gallery-single:hover:nth-child(2n+1):after { background: blue; } .bne-gallery-masonry-wrapper .gallery-single:hover:nth-child(3n+1):after { background: green; } ``` * Thread Starter [ppauloff](https://wordpress.org/support/users/ppauloff/) * (@ppauloff) * [8 years, 7 months ago](https://wordpress.org/support/topic/hover-effect-14/#post-9652163) * ok, almoust there! one last thing, images are randomly ordered, so i can’t control hover color over them (i’d like specific color over specific image)…is there a way to use this effect but “fixed” on single item? - This reply was modified 8 years, 7 months ago by [ppauloff](https://wordpress.org/support/users/ppauloff/). * Plugin Author [Kerry](https://wordpress.org/support/users/bluenotes/) * (@bluenotes) * [8 years, 7 months ago](https://wordpress.org/support/topic/hover-effect-14/#post-9656001) * Well, the markup doesn’t include an “ID” for each image allowing you to target them specifically with the CSS. I’ll try about adding that in the next update that will go out shortly including being able to include captions on the overlay. * Thread Starter [ppauloff](https://wordpress.org/support/users/ppauloff/) * (@ppauloff) * [8 years, 7 months ago](https://wordpress.org/support/topic/hover-effect-14/#post-9656052) * ok, no problem! i think i’ll wait for the next one 🙂 * thanks again, you good man! * Plugin Author [Kerry](https://wordpress.org/support/users/bluenotes/) * (@bluenotes) * [8 years, 7 months ago](https://wordpress.org/support/topic/hover-effect-14/#post-9657319) * Hi, I’ve updated the plugin to v1.1 and included captions as an option for the masonry display. In the shortcode, set caption to true. * ``` Example: [gallery display="masonry" caption="true" ids="22,23,24,25,26,27,28,29"] ``` * Now with the CSS, you can ignore most of what we discussed. The only items you would need is below. * ``` .bne-gallery-masonry-wrapper .gallery-single.image-id-27 .caption-overlay { background: red; } .bne-gallery-masonry-wrapper .gallery-single.image-id-22 .caption-overlay { background: green; } .bne-gallery-masonry-wrapper .gallery-single.image-id-28 .caption-overlay { background: blue; } ``` * Each image has a unique ID and is now in the HTML markup allowing you to target them specifically. So with the above, I’ve targeted the image with an ID of 27 to use a red background for the overlay, Image #22 with green, and Image #28 with blue. * You, of course, would set these to be different in the CSS. This will also allow you to display them in a random order and the IDs are unique to the image themselves. * Thread Starter [ppauloff](https://wordpress.org/support/users/ppauloff/) * (@ppauloff) * [8 years, 7 months ago](https://wordpress.org/support/topic/hover-effect-14/#post-9658319) * you really great man, thank you very very much! * unfortunately seems not to work, i’ve added the caption to the gallery text, these codes on the css (with the correct image id) but nothing changed (i’m really sorry to annoy you, but i feel we’re almoust there!) * Plugin Author [Kerry](https://wordpress.org/support/users/bluenotes/) * (@bluenotes) * [8 years, 7 months ago](https://wordpress.org/support/topic/hover-effect-14/#post-9659632) * Did you include `caption="true"` in the shortcode? * Thread Starter [ppauloff](https://wordpress.org/support/users/ppauloff/) * (@ppauloff) * [8 years, 7 months ago](https://wordpress.org/support/topic/hover-effect-14/#post-9660048) * yes i did, also tried to change this * > .bne-gallery-masonry-wrapper .gallery-single:hover:after { * to .gallery-single.image * but it doesn’t work! * Plugin Author [Kerry](https://wordpress.org/support/users/bluenotes/) * (@bluenotes) * [8 years, 7 months ago](https://wordpress.org/support/topic/hover-effect-14/#post-9660111) * The original CSS that we had you won’t need anymore. Only what I mentioned [here](https://wordpress.org/support/topic/hover-effect-14/#post-9657319). * When displaying captions, you would set the text within the gallery image screen( not the media library). If the image does not have caption text then the overlay wont be there for that individual image. * If you’re comfortable, you can send me a login and I can take a look for you. You can send it privately on my [website](https://www.bnecreative.com/contact/). * Thread Starter [ppauloff](https://wordpress.org/support/users/ppauloff/) * (@ppauloff) * [8 years, 7 months ago](https://wordpress.org/support/topic/hover-effect-14/#post-9662983) * no, it works! wow, thank you very very much man, can’t say how much you’ve done for me, thanks a lot! * 🙂 * one real **last** thing…i’m custimizing the hover, and using the code you sent before the uprage it perfectly fits, but it has sort of “bottom margin”… i mean the hover exactly covers the image, but has an abundance on the bottom and i can’t fix it, even adjusting the 13-15px margin - This reply was modified 8 years, 7 months ago by [ppauloff](https://wordpress.org/support/users/ppauloff/). * Thread Starter [ppauloff](https://wordpress.org/support/users/ppauloff/) * (@ppauloff) * [8 years, 7 months ago](https://wordpress.org/support/topic/hover-effect-14/#post-9663298) * and moreover you can’t click on them Viewing 15 replies - 1 through 15 (of 19 total) 1 [2](https://wordpress.org/support/topic/hover-effect-14/page/2/?output_format=md) [→](https://wordpress.org/support/topic/hover-effect-14/page/2/?output_format=md) The topic ‘hover effect’ is closed to new replies. * ![](https://ps.w.org/bne-gallery-extended/assets/icon-256x256.png?rev=1417492) * [BNE Gallery Extended](https://wordpress.org/plugins/bne-gallery-extended/) * [Frequently Asked Questions](https://wordpress.org/plugins/bne-gallery-extended/#faq) * [Support Threads](https://wordpress.org/support/plugin/bne-gallery-extended/) * [Active Topics](https://wordpress.org/support/plugin/bne-gallery-extended/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/bne-gallery-extended/unresolved/) * [Reviews](https://wordpress.org/support/plugin/bne-gallery-extended/reviews/) ## Tags * [hover](https://wordpress.org/support/topic-tag/hover/) * 19 replies * 2 participants * Last reply from: [ppauloff](https://wordpress.org/support/users/ppauloff/) * Last activity: [8 years, 7 months ago](https://wordpress.org/support/topic/hover-effect-14/page/2/#post-9667273) * Status: resolved