html - Bootstrap 3 - CSS Hover Effect leaves white mark in Firefox Browser -
i've created image hover thingy website in when image gets hovered text appears. happens when unhover white thingy appears when hover image disappears. these happen in firefox. have idea why happens? , should or let be? haha
#hover { color: rgba(188, 175, 204, 0.9); } h2#testimonials { color: #e72635; } div#all { width: 100%; height: 100%; } /* generic css */ .view { margin: 10px; float: left; border: 10px solid #fff; overflow: hidden; position: relative; text-align: center; box-shadow: 1px 1px 2px #e6e6e6; cursor: default; background: #fff url(../images/bgimg.jpg) no-repeat center center } .view .mask, .view .content { width: 300px; height: 200px; position: absolute; overflow: hidden; top: 0; left: 0 } .view img { display: block; position: relative } .view h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; font-family: "josefin slab","helvetica neue",helvetica,arial,sans-serif; padding: 10px; background: rgba(0, 0, 0, 0.8); margin: 20px 0 0 0 } .view p { font-family: montserrat,"helvetica neue",helvetica,arial,sans-serif; font-style: italic; font-size: 12px; position: relative; color: #fff; padding: 0px 20px 0px; text-align: center } .view a.info { display: inline-block; text-decoration: none; padding: 7px 14px; background: #000; color: #fff; font-family: montserrat,"helvetica neue",helvetica,arial,sans-serif; text-transform: uppercase; box-shadow: 0 0 1px #000 } .view a.info:hover { box-shadow: 0 0 5px #000 } /*2*/ .view-second img { transition: 0.2s ease-in; -webkit-transition: 0.2s ease-in; } .view-second .mask { background-color: rgba(12, 19, 27, 0.6); width: 400px; padding: 105px; height: 450px; opacity: 0; transition: 0.2s ease-in-out 0s; -webkit-transition: 0.2s ease-in-out; } .view-second h2 { border-bottom: 1px solid rgba(0, 0, 0, 0.3); font-family: "josefin slab","helvetica neue",helvetica,arial,sans-serif; background: transparent; margin: 20px 40px 0px 40px; opacity: 0; color: #8f1925; transform: scale(0); transition: 0.5s linear 0s; } .view-second p { transform: scale(0); transition: 0.5s linear 0s; } .view-second a.info { opacity: 0; transform: scale(0); transition: 0.5s linear; } /* */ .view-second:hover .mask { opacity:1; transform: translate(-80px, -125px) rotate(45deg); -webkit-transform: translate(-80px, -125px) rotate(45deg); } .view-second:hover h2, .view-second:hover p, .view-second:hover a.info{ transform: scale(1); opacity: 3; } img#articlepic { height: 200px; width: 300px; }<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>the university digest</title> <link rel="shortcut icon" href="img/logo1.png" /> <!-- bootstrap core css --> <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- custom css --> <link href="css/template.css" rel="stylesheet"> <link href="css/indexobjects.css" rel="stylesheet"> <!-- fonts --> <link href="http://fonts.googleapis.com/css?family=open+sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=josefin+slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=montserrat:400,700" rel="stylesheet" type="text/css"> </head> <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> <!-- header container --> <div class="container-full" id="headerc"> <header class="masthead"> <p id="headerp">the university digest</p> <p id="subheader">the official student publication of western mindanao state university</p> </header> </div> <!-- navigation --> <div id="nav"> <!-- content layout --> <!-- portfolio grid section --> <section id="portfolio" class="bg-light-gray"> <div class="container"> <div class="rows"> <div class="col-lg-12"> <h2 class="section-heading">articles</h2> </div> <div id="all"> <div class="view view-second"> <img src="http://goo.gl/n6eiy5" class="img-responsive img-full" alt="" id="articlepic" /> <div class="mask"></div> <div class="content"> <h2 id="testimonials">testimonials</h2> <p>“a description of sort between these tags. cool ye , awesomely awesome. cool.”</p> <a href="#" class="info">read more</a> </div> </div> <div class="view view-second"> <img src="http://goo.gl/ikgtbn" class="img-responsive" alt="" id="articlepic" /> <div class="mask"></div> <div class="content"> <h2 id="testimonials">testimonials</h2> <p>“a description of sort between these tags. cool ye , awesomely awesome. cool.”</p> <a href="#" class="info">read more</a> </div> </div> <div class="view view-second"> <img src="http://jacobstone.co.uk/livetesting/guy.jpg" class="img-responsive" alt="" id="articlepic" /> <div class="mask"></div> <div class="content"> <h2 id="testimonials">testimonials</h2> <p>“a description of sort between these tags. cool ye , awesomely awesome. cool.”</p> <a href="#" class="info">read more</a> </div> </div> <div class="view view-second"> <img src="http://jacobstone.co.uk/livetesting/guy.jpg" class="img-responsive" alt="" id="articlepic"/> <div class="mask"></div> <div class="content"> <h2 id="testimonials">testimonials</h2> <p>“a description of sort between these tags. cool ye , awesomely awesome. cool.”</p> <a href="#" class="info">read more</a> </div> </div> <div class="view view-second"> <img src="http://jacobstone.co.uk/livetesting/guy.jpg" class="img-responsive" alt="" id="articlepic"/> <div class="mask"></div> <div class="content"> <h2 id="testimonials">testimonials</h2> <p>“a description of sort between these tags. cool ye , awesomely awesome. cool.”</p> <a href="#" class="info">read more</a> </div> </div> <div class="view view-second"> <img src="http://jacobstone.co.uk/livetesting/guy.jpg" class="img-responsive" alt="" /> <div class="mask"></div> <div class="content"> <h2 id="testimonials">testimonials</h2> <p>“a description of sort between these tags. cool ye , awesomely awesome. cool.”</p> <a href="#" class="info">read more</a> </div> </div> </div> </div> </div> </section> </body> </html>
add opacity:0 element rid of bug in ff.
.view-second p { opacity: 0; transform: scale(0); transition: 0.5s linear 0s; } 
Comments
Post a Comment