css hover image and show icon not show


Tags: html,css,css3

Problem :

I design book front using css and need to show search icon in hover image using css like this :

.third-effect .mask {
    opacity: 0;
    overflow:visible;
    border:100px solid rgba(0, 0, 0, 0.7);
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.third-effect a.info {
    position:relative;
    top:-10px;
    opacity: 0;
    -webkit-transition: opacity 0.5s 0s ease-in-out;
    -moz-transition: opacity 0.5s 0s ease-in-out;
    -o-transition: opacity 0.5s 0s ease-in-out;
    -ms-transition: opacity 0.5s 0s ease-in-out;
    transition: opacity 0.5s 0s ease-in-out;
}
.third-effect:hover .mask {
    opacity: 1;
    border:100px solid rgba(0, 0, 0, 0.7);
}
.third-effect:hover a.info {
    opacity:1;
    -moz-transition-delay: 0.3s;
    -webkit-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.view {
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    width: 122px;
    height: 160px;
    box-shadow: -3px 3px 0 #ccc, -6px 6px 0 #999, -9px 9px 0 #ccc;
    -webkit-transition: all 0.15s ease;
}
.view:hover {
    box-shadow: -5px 5px 0 #ccc, -10px 10px 0 #999, -15px 15px 0 #ccc;
}
.view .mask, .view .content {
    width: 122px;
    height: 160px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}
.view img {
    display: block;
    position: relative;
}
.view a.info {
    background:url("https://cdn3.iconfinder.com/data/icons/mixed-ui-icons-3/93/Untitled-124-128.png") center no-repeat;
    display: inline-block;
    text-decoration: none;
    padding:0;
    text-indent:-9999px;
    width:20px;
    height:20px;
}

But in action my search icon not show in hover image. how do fix this ?!

DEMO : http://jsfiddle.net/Sambora/o6nwamag/



Solution :

Try this style it's work. in your style remove border and set using background color.

.third-effect .mask {
    opacity: 0;
    overflow:visible;
    background-color: rgba(0, 0, 0, 0.7);
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.third-effect a.info {
    position:relative;
    top:40px;
    opacity: 0;
    -webkit-transition: opacity 0.5s 0s ease-in-out;
    -moz-transition: opacity 0.5s 0s ease-in-out;
    -o-transition: opacity 0.5s 0s ease-in-out;
    -ms-transition: opacity 0.5s 0s ease-in-out;
    transition: opacity 0.5s 0s ease-in-out;
}
.third-effect:hover .mask {
    opacity: 1;
    
}
.third-effect:hover a.info {
    opacity:1;
    -moz-transition-delay: 0.3s;
    -webkit-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.view {
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    width: 122px;
    height: 160px;
    box-shadow: -3px 3px 0 #ccc, -6px 6px 0 #999, -9px 9px 0 #ccc;
    -webkit-transition: all 0.15s ease;
}
.view:hover {
    box-shadow: -5px 5px 0 #ccc, -10px 10px 0 #999, -15px 15px 0 #ccc;
}
.view .mask, .view .content {
   height: 160px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 122px;
}
.view img {
    display: block;
    position: relative;
}
.view a.info {
    background: rgba(0, 0, 0, 0) url("https://cdn3.iconfinder.com/data/icons/mixed-ui-icons-3/93/Untitled-124-128.png") no-repeat scroll center center / 100% auto;
    display: inline-block;
    height: 20px;
    padding: 20px;
    text-decoration: none;
    text-indent: -9999px;
    width: 20px;
}
<div class="view third-effect">
    <img src="http://i.imgur.com/nbynS1m.jpg" />
    <div class="mask">	<a href="#" class="info" title="Full Image">Full Image</a>

    </div>
</div>


    CSS Howto..

    how do I add equal gap on each side of the text with css?

    In LESS, how to rewrite this CSS composition style?

    CSS: How to prevent focus from breaking absolute position in overflow:hidden wrapper

    Bootstrap “jumbotron-narrow” example. how does the style change?

    How to design a comment box similar to facebook using only CSS?

    CSS - how to make image container width fixed and height auto stretched

    Showing a time countdown progress bar

    How to make images to go out of the div when width is over the max-width?

    how to add an image on a div without losing previous content in CSS hover effect

    How to have multiple borders on div using css

    How to id dom table so I can position it on page?

    How can i Change the DOt in a JavaFx RadioButton?

    How to apply different css style for IE 10 and 11 only?

    How to center text next to a responsive image in Bootstrap3

    How to resize an image cropping it equally on each side with CSS

    How to change comma separated css values with Jquery.css Method?

    How to customize Twitter Bootstrap from Illustrator design

    How to change size to GtkWidget with CSS?

    CSS Clouds - How to adjust to inner content?

    How to change CSS of ng-view when triggering CSS in ng-include

    How do I use CSS with a ruby on rails application?

    How to make label inside div to be in the same position as lower ones

    How to properly float this image verticaly aligned?

    How do I make a dropdown extend to the left?

    How to align more than one DIVs which list of letters to the center

    How to create reusable Durandal widgets

    How can I hide page elements till an AJAX call completes?

    HTML/CSS- how to align part of a cell to the left, and part to the right?

    How to make a div with a circular shape? [duplicate]

    How can I create DIV “rows” while having a DIV float beside them?