CODEWITHSUNDEEP
htmlcsscss-transitions
Jata
Jata

Reputation: 277

CSS3 Transitioning width property

I have developed an CSS and HTML code to create some kind of accordion multi-banner. I'm not using javascript at all. Every thing works fine,except for I issue I can not resolve:

  1. Start point is the first image "expanded"
  2. If you hover over some other image, the former hovered one srinks,and the current also expand. Remainig ones accomodate their witdh

PROBLEM: if you hover fast from left to rigth to the last image you come to a point where you can over a greyed on (wrapper background) and all iamges remain then collapsed. A must should be that,always, no matter what, there's at least one image expanded to show let's say an ad,product to choose...

How can I resolve that? The reason I'm not using width:auto is that it currently doesn't make any transitions with that value set.

CODE at http://jsfiddle.net/7NR4Y/

<style type="text/css">
#wrapper div.sector {
    width:50px;
    height:250px;
    background-position:top center;
    background-repeat:no-repeat;
    float:left;
    max-width:300px;
    opacity:0.5;
    overflow:hidden;    

  -webkit-transition:all 1s ease-out;  /* Chrome y Safari */
  -o-transition:all 1s ease-out;  /* Opera */
  -moz-transition:all 1s ease-out;  /* Mozilla Firefox */
  -ms-transition:all 1s ease-out;   /* Internet Explorer */
  transition:all 1s ease-out;  /* W3C */

}

#wrapper #first{
    width:300px;
    max-width:300px;
    min-width:50px;
    opacity:1;  
}
#wrapper:hover div.sector{
    width:50px;
    max-width:100%;
    opacity:0.5;    
}
#wrapper:hover #first{
    width:50px;
    max-width:100%; 
}

#wrapper div.sector:hover{
    width:300px !important;
    opacity:1;
}
</style>
<body>
<div id="wrapper" style="width:500px; height:250px; background-color:#CCC; overflow:hidden; position:relative;">

<a href="http://www.xxxx.es/xxx.do"><div id="first" class="sector" title="Imagen 1"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTpTF_3Pjjnsum_miN1hicvsPb-44qUm4Qban2_MfzEHevwK0_" /></div></a>
<a href="http://www.xxxx.es/xxx.do"><div class="sector" title="Imagen 2"><img src="http://1.bp.blogspot.com/-dazqpbQnahc/UaxhFz6mwgI/AAAAAAAAGJQ/pVhtFcqEBiY/s640/Ideal-landscape.jpg" /></div></a>
<a href="http://www.xxxx.es/xxx.do"><div class="sector" title="Imagen 3"><img src="http://2.bp.blogspot.com/-XegWV6RbUmg/UKIA7m7XgDI/AAAAAAAAAtA/6yQKXMkTjmA/s640/village-vector-the-dock-pixels-tagged-beach-landscape-512305.jpg" /></div></a>
<a href="http://www.xxxx.es/xxx.do"><div class="sector" title="Imagen 4"><img src="http://i.telegraph.co.uk/multimedia/archive/01842/landscape-rainbow_1842437i.jpg" /></div></a>
<a href="http://www.xxxx.es/xxx.do"><div class="sector" title="Imagen 5"><img src="http://c.dryicons.com/files/graphics_previews/sunset_landscape.jpg" /></div></a>

</div>

Upvotes: 2

Views: 215

Answers (1)

vals
vals

Reputation: 64264

I have added the following to your CSS

a:last-child div.sector {
    position: relative;
    overflow: visible !important;
}

a:last-child div.sector:after {
    content: "";
    position: absolute;
    left: 100%;
    top: 0px;
    height: 100%;
    width: 100px;
    background-color: green;
}

This creates a pseudo element after the last div of your series.

This pseudo will receive the hover state and transmit it to the element. This, way, even if the cursor goes in the zone of the wrapper that gets exposed sometimes, it will still get it selected.

I have it green so that you can se what is happening, of course in production make it transparent.

fiddle

Disregard all the previous answer !

All you need is

a:last-child div.sector {
    overflow: visible !important;
}

fiddle 2

Upvotes: 2

Related Questions