How do I add a transition to this rollover?


Tags: css,css3

Problem :

How do I add a transition to this rollover?

Here is my css so far:

.img-container {
  width: 401px;
  height: 267px;
  position: relative;
}

.img-container:hover .square-icon {
  display: block;
}

.square-icon {
  opacity: .5;
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  background: url(images/zoom-icon.png) center center no-repeat; 
  background-color: #FF3860;
  cursor:pointer;
  display:none;
}

And here is the html:

<div class="img-container">
  <img alt="lorem" width="401" height="267" src="images/450-300-13.png">
  <div class="square-icon"></div>
</div>

I know I need to add:

transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;

But I'm not sure where to add it?



Solution :

You need to set the two states (normal and hover) of .square-icon to have different levels of opacity and then you can transition on opacity.

See my jsBin demo here

.img-container:hover .square-icon {
  opacity: 1; 
}

.square-icon {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  background: url(images/zoom-icon.png) center center no-repeat; 
  background-color: #FF3860;
  cursor:pointer;
  opacity: 0; 
  transition: display 2s ease-in-out;
  -moz-transition: opacity 2s ease-in-out;
  -webkit-transition: opacity 2s ease-in-out;
}

    CSS Howto..

    How to get a button to fill the full width of the footer in Mobile View?

    How to format an arabic poem using jquery?

    How to change when Jquery edits my CSS upon reaching an anchor point?

    How to split an HTML paragraph up into its lines of text with JavaScript

    Bootstrap - How to keep the natural container layout while fixing the container to the bottom?

    How to combine class and ID in CSS selector?

    ASP.Net MVC: How can I easily change the tab color of my navigation menu based on the tab that I'm on?

    How to use sprite css [duplicate]

    Can someone tell me how to implement this Javascript? HTML CSS

    CSS How to force DIVs side by side with text overflow?

    how to copy font-family from a webpage

    how to create divs rowwise in css

    CSS how to change the color of a link within a class

    how to blur all list-items text except for (this) a:hover

    How to toggle overlay with no body scroll using the same button / div

    How do I add a the bootstrap 'form-control' class to a select using the Simple_Form gem?

    How to exclude styles for a some specific elements using css?

    css: column-count property - how to modify it with css to modify the number of items in each column?

    How to remove a class as each image is loaded

    How to indicate that an LI with a link was pressed.

    Large white space below footer showing on certain pages on iPhone actual device but not emulator in Chrome

    How to change the content of a span using css hover?

    How to set css to more selectors when one of it is $(this)?

    CSS/JQuery: how to create submenu for table row that stays visible mousing from row onto menu?

    How should I use `position` and other properties correctly to position my web page?

    how to deselect the active span element?

    How to refine CSS media types and properties?

    Content shows up when clicked on the link

    How to create a responsive sprite sheet animation in css?

    CSS: How to create colsgroup like semantic-ui way