CSS3 opacity effect - html

Question

I've found a piece of CSS code that works pretty well on my website but am having troubles having the effect work exactly to specification.
What I'm trying to do: I'd like the images at default to have an opacity of 1.0, but when you scroll over any of the images then the images will go to an opacity of 0.3. This currently works, and you can view the jsfiddle here: http://jsfiddle.net/raybullard/C8NMs/
Below is the HTML and CSS:
<div id="wrap">
<div id="columns" class="columns_3">
<div class="figure">
<img src="http://i.imgur.com/ruU04I6.jpg">
</div>
<div class="figure">
<img src="http://i.imgur.com/ruU04I6.jpg">
</div>
<div class="figure">
<img src="http://i.imgur.com/ruU04I6.jpg">
</div>
<div class="figure">
<img src="http://i.imgur.com/ruU04I6.jpg">
</div>
<div class="figure">
<img src="http://i.imgur.com/ruU04I6.jpg">
</div>
#wrap{
width:240px;
}
.columns_3 .figure{
width:70px;
margin-right:0px;
}
.columns_3 .figure:nth-child(3){
margin-right: 0;
}
#columns .figure:hover{
-webkit-transform: scale(1.1);
-moz-transform:scale(1.1);
transform: scale(1.1);
}
#columns:hover .figure:not(:hover) {
opacity: 0.4;
}
div#columns .figure {
display: inline-block;
background: #FEFEFE;
border: 2px solid #FAFAFA;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
margin: 3px 3px 3px 0px;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
opacity: 1;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
-moz-border-radius: 5px;
border-radius: 5px;
}
div#columns .figure img {
width: 60px;
height:50px;
border-bottom: 1px solid #ccc;
margin-bottom: 0px;
}
The problem is that the entire #columns div is called out, and since I have only 5 icons if you scroll over where the sixth icon 'should be' the entire div changes opacity.
What I'd like to do is to have the non-active icons change opacity to 0.3 at the .figure level (rather than #columns level) when a user scrolls over an icon if possible.
Any help/suggestions are appreciated!
Thanks.

Answer 1

Just add property value of display: inline to #columns block of CSS code and you're good to go.
Solution: Adding property value of display: inline to #columns Makes it technically present only in the areas where it contains something.
#columns {
display: inline;
/* This block of CSS solves your problem */
}
#wrap {
width: 240px;
}
.columns_3 .figure {
width: 70px;
margin-right: 0px;
}
.columns_3 .figure:nth-child(3) {
margin-right: 0;
}
#columns .figure:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
}
#columns:hover .figure:not(:hover) {
opacity: 0.4;
}
div#columns .figure {
display: inline-block;
background: #FEFEFE;
border: 2px solid #FAFAFA;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
margin: 3px 3px 3px 0px;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
opacity: 1;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
-moz-border-radius: 5px;
border-radius: 5px;
}
div#columns .figure img {
width: 60px;
height: 50px;
border-bottom: 1px solid #ccc;
margin-bottom: 0px;
}
<div id="wrap">
<div id="columns" class="columns_3">
<div class="figure">
<a href="http://www.burton.com">
<img src="http://i.imgur.com/ruU04I6.jpg">
</a>
</div>
<div class="figure">
<a href="http://www.burton.com">
<img src="http://i.imgur.com/ruU04I6.jpg">
</a>
</div>
<div class="figure">
<a href="http://www.burton.com">
<img src="http://i.imgur.com/ruU04I6.jpg" />
</a>
</div>
<div class="figure">
<a href="http://www.burton.com">
<img src="http://i.imgur.com/ruU04I6.jpg" />
</a>
</div>
<div class="figure">
<a href="http://www.burton.com">
<img src="http://i.imgur.com/ruU04I6.jpg" />
</a>
</div>

Answer 2

This is happening because the columns div extend to the size to its child, and is being hovered.
If you don't need more positioning in the rest of the layout, you can cut it
.columns_3 {
height: 0px;
}
and so avoid it being hovered
demo

Answer 3

i dont know if you're open to jquery, but here's a solution with jquery: http://jsfiddle.net/C8NMs/6/
This solution works for all elements with class .figure, no matter where you place them on the page.
$(document).ready(function() {
$('.figure').on('mouseover', function() {
var element = $(this);
$('.figure').not(element).css('opacity', 0.4);
})
$('.figure').on('mouseout', function() {
$('.figure').css('opacity', 1);
});
});