.wall-content img, .wall-im img { width: 100%; } .main-wall { margin-bottom: 30px; } .wall-txt { display: block; border-left: 2px dotted #ddd; border-bottom: 2px dotted #ddd; border-right: 2px dotted #ddd; padding: 5px 10px; text-align: center;color: #777; } .main-wall a{text-decoration:none;} .main-wall a:hover span{color:#f30;transition:all .5s;} .wall-img-fix { position: relative; } .wall-listing { position: absolute; top: 0px; left: 0; right: 0; text-align: center; opacity: 0; /* display:none; */ transition:all .5s; } .wall-img-fix:hover .wall-listing { opacity: 1; /* display: block; */ top: 50%; transform: translate(0px, -50%); z-index: 1; } .wall-img-fix:after{ content:""; position:absolute; top:0; left:0px; right:0px; background-color: rgba(51,51,51,.8); z-index: 0; height:0%; transition:all .5s; } .wall-img-fix:hover:after{ height:100%;transition:all .5s; } .wall-content h5 { border-left: 2px dotted #ddd; border-bottom: 2px dotted #ddd; border-right: 2px dotted #ddd; } .wall-listing ul > li > a { color: #333; background-color: #fff; width: 100px; font-size: 13px; border-radius: 3px; padding: 2px 0px; margin-bottom: 10px; } .wall-listing ul > li > a:hover{background-color:#f30;color:#fff;transition:all .5s;} .wall-listing ul > li:last-child a{margin-bottom:0px;}