I've created an image hover thingy for my website where in when the image gets hovered text appears. What happens is that when I unhover it a white thingy appears but when I hover it to another image it disappears. These all happen only in Firefox. Do you have any idea why this happens? And should I do something about it or just let it 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: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
}
.view-second .mask {
background-color: rgba(12, 19, 27, 0.6);
width: 400px;
padding: 105px;
height: 450px;
opacity: 0;
transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 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: all 0.5s linear 0s;
}
.view-second p {
transform: scale(0);
transition: all 0.5s linear 0s;
}
.view-second a.info {
opacity: 0;
transform: scale(0);
transition: all 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="https://i.sstatic.net/M6U3Oodp.png" class="img-responsive img-full" alt="" id="articlePic" />
<div class="mask"></div>
<div class="content">
<h2 id="testimonials">Testimonials</h2>
<p>“A description of some sort between these tags. I am so cool ye and awesomely awesome. He was cool.”</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="view view-second">
<img src="https://scontent-a-sea.xx.fbcdn.net/hphotos-xfp1/v/t1.0-9/s720x720/1901663_700339420055705_5885873089628748542_n.jpg?oh=7b7b915118cd985891cb8c9ae1fb22af&oe=550C2E8D" class="img-responsive" alt="" id="articlePic" />
<div class="mask"></div>
<div class="content">
<h2 id="testimonials">Testimonials</h2>
<p>“A description of some sort between these tags. I am so cool ye and awesomely awesome. He was 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 some sort between these tags. I am so cool ye and awesomely awesome. He was 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 some sort between these tags. I am so cool ye and awesomely awesome. He was 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 some sort between these tags. I am so cool ye and awesomely awesome. He was 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 some sort between these tags. I am so cool ye and awesomely awesome. He was cool.”</p>
<a href="#" class="info">Read More</a>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>Add opacity:0 to the element initially to get rid of the bug in FF.
.view-second p {
opacity: 0;
transform: scale(0);
transition: all 0.5s linear 0s;
}