Instagram hover CSS-Venture

drderekwallin · Member · Feb 24, 2016 at 6:05 pm
Copy link

Add topic to favorites
I need help writing a CSS to be able to activate a hover feature on my instagram widget on the footer of my page.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Feb 24, 2016 at 7:28 pm
Copy link
Hi, you did not tell us what sort of hover effect you wanted. Some are doable and some are not. This would be an example that would add a red border on the images when hovered.
```
.footer-widget-area .footer-widget .wpcom-instagram-images img:hover {
    border: 4px solid #cc0000;
}
```
drderekwallin · Member · Feb 24, 2016 at 10:20 pm
Copy link
I would like to shoe how many likes and comments are on that photo if possible….like this blogs instagram….http://www.barefootblonde.com
drderekwallin · Member · Feb 24, 2016 at 10:21 pm
Copy link
show*
thesacredpath · Member · Feb 25, 2016 at 6:23 am
Copy link
@drderekwallin, the WordPress.com Instagram Widget does not have the capability to show comments and likes counts, and that is not something that could be done with CSS.
drderekwallin · Member · Feb 25, 2016 at 2:20 pm
Copy link
darn! well can I hover with a sheer black layer over the pictures?
thesacredpath · Member · Feb 25, 2016 at 10:28 pm
Copy link
Hi, you had asked about the padding on left/right of Instagram widget in the other thread and I thought I would answer that here to keep things separate. We need to use a bit of CSS trickery to only target only the instagram section since the social icon section has the same CSS classes. The :first-of-type pseudo selector allows us to target only the first instance of .footer-widget.
```
#colophon .footer-widget:first-of-type {
    padding-left: 0;
    padding-right: 0;
}
```
On the Instagram widget, add the following and you can adjust the opacity of .wpcom-instagram-images img to control how dark things are before hover.
```
.wpcom-instagram-images {
    background: #000;
}
.wpcom-instagram-images img {
    opacity: 0.4;
}
.wpcom-instagram-images img:hover {
    opacity: 1;
}
```
drderekwallin · Member · Feb 26, 2016 at 12:19 am
Copy link
Great, thank you!
thesacredpath · Member · Feb 26, 2016 at 1:09 am
Copy link
You are welcome.

No items found.