Image hover opacity problem

daveyin · Member · Jan 17, 2014 at 3:58 am
Copy link

Add topic to favorites
So I managed to figure out how to have translucent images and turn them opaque when the mouse is hovering over them. I’m using this for my social media icons.

BUT, I ran into a problem I can’t seem to figure out, which is that using the style code that I found for opacity, it inserts a line break after each image. You can see it at the bottom of my homepage, and the /blog child page.

There’s nothing in my widget’s HTML that is doing this, so being the CSS noob that I am, I turn to you for help, please. How can I have all my social media icons on the same line? Thanks!

The blog I need help with is: (visible only to logged in users)
johnconners · Member · Jan 17, 2014 at 3:45 pm
Copy link
Ok, to make those icons line up (which is what I assume you’re after) for those specific widgets you can add this CSS:
```
#text-6 .textwidget div
#text-3 .textwidget div {
	display: inline;
}
```
Or to apply to all text widgets:
```
.textwidget div {
	display: inline;
}
```
johnconners · Member · Jan 17, 2014 at 3:46 pm
Copy link
Oops, missed out a comma, that first one should read:
```
#text-6 .textwidget div,
#text-3 .textwidget div {
	display: inline;
}
```
daveyin · Member · Jan 17, 2014 at 7:24 pm
Copy link
That worked!

I’m a bit confused as to why the extra code was necessary considering the original code was only supposed to affect opacity as opposed to formatting, but it’s probably something to do with CSS rules that I don’t yet understand.

Thanks very much!
designsimply · Member · Jan 21, 2014 at 12:16 am
Copy link
It’s because in the HTML you added for your text widget, you put each social media icon into a “div” tag and those kinds of tags are block level elements in HTML which means they each get placed on their own line by default. That’s why switching the display for those specific elements to “inline” solves the problem.

To learn more, see http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm

No items found.