I'm trying to figure out how to give a semi-transparent image overlay (that appears on :hover) a CSS3 transition (ease). But it's not working. I'm not sure if it's because I'm missing something, or if transitions just don't work with the display property. Any ideas for a CSS workaround (I don't know JavaScript)? Thanks in advance.
Relevant HTML and CSS:
<div class="thumbnail">
<figure>
<img src="images/dude.jpg" alt=""/>
</figure>
<div class="thumbnail-overlay">
<h2>Project Name</h2>
<h3> Skills Skills Skills</h3>
<p>This is a project description.</p>
</div>
</div>
.thumbnail {
position:relative;
float:left;
width:40%;
margin:1.5% 1.5% 0 0;
}
.thumbnail-overlay {
background-color: #dark-gray;
display:none;
opacity:.9;
position:absolute;
top:0;
left:0;
width:100%; height:100%;
overflow:hidden;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
transition:all.3s ease;
}
.thumbnail:hover .thumbnail-overlay {
display:block;
}
as i see it is because display property. css transition doesn't work good with it and that's why you have this probleme.
here is the css code that i tested and work's ok:
.thumbnail .thumbnail-overlay {
background-color: #dark-gray;
display:block;
opacity:0;
position:absolute;
top:0;
left:0;
width:100%; height:100%;
overflow:hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.thumbnail:hover .thumbnail-overlay {
opacity: .9;
}
hope it helps !!!
It is working for me.I seperated the CSS to another file and linked it to the HTML file.It works nice for me
HTML
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<div class="thumbnail">
<figure>
<img src="/home/qbadmin/Downloads/Pic.jpg" alt=""/>
</figure>
<div class="thumbnail-overlay">
<h2>Project Name</h2>
<h3> Skills Skills Skills</h3>
<p>This is a project description.</p>
</div>
</div>
CSS
.thumbnail {
position:absolute;
float:left;
width:40%;
left :100 px;
top :100px;
margin:1.5% 1.5% 0 0;
}
.thumbnail-overlay {
background-color: #dark-gray;
display:none;
opacity:.9;
position:absolute;
top:100px;
left:100px;
width:100%; height:100%;
overflow:hidden;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
transition:all.3s ease;
}
.thumbnail:hover .thumbnail-overlay {
display:block;
opacity: .9;
}
Related
Im trying to on hover make text appear under these circles but when ever I try to add paragraphs they just make my circles go out of place.
This is what I'm trying to achieve
http://imgur.com/TZfpQIF
https://jsfiddle.net/u02e1mfe/
HTML
<div class="row">
<p><b>Works</b></p>
<div "row1">
<div class="round-button">
<div class="round-button-circle" class=".col-md-4">
Google
</div>
</div>
<div class="round-button">
<div class="round-button-circle" class=".col-md-4">
nn
</div>
</div>
<div class="round-button">
<div class="round-button-circle" class=".col-md-4">
nm
</div>
</div>
</div>
<div "row2">
<div class="round-button">
<div class="round-button-circle" class=".col-md-4">
nn
</div>
</div>
<div class="round-button">
<div class="round-button-circle" class=".col-md-4">
nff
</div>
</div>
<div class="round-button">
CSS
.row
{
height: 80%;
width: 100%;
text-align:center;
padding-top: 2%;
font-size: 25;
}
.round-button {
display:inline-block;
position: relative;
width:10%;
padding-top: 2%;
}
.round-button-circle {
height: 100px;
position:relative;
margin:0 auto;
border:2px solid #f0f0f0;
background: white no-repeat center center;
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius: 100px;
width: 100px;
cursor:pointer;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
font-size: 0%;
}
.round-button-circle:hover {
background:#000000;
text-decoration-color: white;
font-size: 50%;
margin-bottom: 80%;
}
.round-button a{
display:block;
float:left;
width:100%;
padding-top:50%;
padding-bottom:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:#e2eaf3;
font-family:Verdana;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
}
They are close together in the fiddle but in my actual website they aren't like that so just ignore it. Im trying to make the text appear below the circle when you hover over it. Any ideas? New to CSS and HTML
Add these lines to .round-button a css
position: absolute;
bottom: -90px;
color: red;
(You can replace the color, is just for you to notice the change)
I'm trying to get a light black overlay on the image when you hover on it (like the text) sorry I'm new to css and HTML!
help would be appreciated
HTML
<div id="con">
<div id="box1">
<p id="text1">
DESTINATIONS
</p>
</p>
<p id="text2">
AMALFI<BR>SORRENTO<BR>POSITANO</a>
</p>
<p id="text3">
THINGS TO DO
</p>
</p>
<p id="text4">
TOURS<BR>MUSUEMS<BR>SHOPPING</a>
</p>
</div>
css
#con {
width:1024px;
height:670px;
background-color: #161717;
}
#box1 {
float: left;
font-size: 25px;
width: 388px;
height: 477px;
background-image: url(media/trying1.png);
background-size: cover;
margin-left: 120px;
margin-top: 90px;
}
#text1 {
z-index:100;
color:white;
font-size:30px;
text-align: center;
margin-top:80px;
line-height:55px;
opacity: 0;
transition: all 0.5s;
}
#box1:hover #text1 {
opacity: 1;
}
This can be done with :before or :after
#box1{
position:relative;
}
#box1:before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:black;
opacity:0;
z-index:0;
}
#box1:hover:before{
opacity:.6;
transition: all 0.5s;
}
#box1 > *{
position:relative;
z-index:1;
}
http://jsfiddle.net/4bo4zju7/3/
CS3 is great! You no longer need JS for simple rollover effects. Gopalraju's above code should work and so does my example below. You can have a fiddle with it and use the code as you see fit.
The parent div, has a black page background, and the imgdiv changes everything inside it to a opacity by 50% on the mouse rolling over the div. In this case the image is inside the div.
There are a few ways of doing this. This is just another one to ad into the mix. Good luck.
.parentdiv {
background-color:#000;
height:100%;
width:100%;
}
.imgdiv {
padding:30px;
}
.imgdiv a{
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 0.5s linear;
}
.imgdiv a:hover {
opacity: 0.5;
filter: alpha(opacity=50);
-webkit-transition: opacity 0.5s linear;
}
<div class="parentdiv">
<div class="imgdiv">
<a href="http://www.domain.com.au/link.html">
<img src="http://placehold.it/350x150" alt="image" height="150" width="350">
</a>
</div>
</div>
I am new to HTML and CSS, I have found out how to fade when mouseover, but when I mouseover, how can I add in text too? Here is my HTML and CSS:
HTML:
<div class="showTeams">
<p>Please, select a team you'd like to view:</p>
<table class="center">
<tr>
<th>
<div class="tZ"> <a href="#">
<img id="tz" src="../images/teamZeus-pic.png" class="hover item-fade" alt="team Zeus" title="team Zeus"/>
</a>
</div>
</th>
<th>
<div class="zC"> <a href="#">
<img src="../images/zeusCreations-pic.png" class="hover item-fade" alt="zeus Creations" title="zeus Creations"/>
</a>
</div>
</th>
</tr>
</table>
</div>
CSS:
.tZ {
display:inline-block;
background:#000;
}
.zC {
display:inline-block;
background:#000;
}
.item-fade {
vertical-align:top;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.hover:hover {
opacity:0.2;
}
I want text to come in at the same speed as the background fade. Thanks guys
I'm not sure if I understand what you want, but I tryed something so you can take a look to this:
<div class="showTeams">
<p>Please, select a team you'd like to view:</p>
<table class="center">
<tr>
<th>
<div class="tZ"> <a href="#">
<img id="tz" src="../images/teamZeus-pic.png" class="hover item-fade" alt="team Zeus" title="team Zeus"/>
</a>
<div id="hover-content">
Text shows only on mouseover
</div>
</div>
</th>
<th>
<div class="zC"> <a href="#">
<img src="../images/zeusCreations-pic.png" class="hover item-fade" alt="zeus Creations" title="zeus Creations"/>
</a>
</div>
</th>
</tr>
</table>
</div>
CSS:
.tZ {
display:inline-block;
background:#000;
}
.zC {
display:inline-block;
background:#000;
}
.item-fade {
vertical-align:top;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.hover:hover {
opacity:0.2;
}
#hover-content {
color: white;
display:block;
}
.tZ:hover #hover-content {
display:none;
}
here are two way to perform this with css (jsfiddle setup for css) and jquery (jsfiddle setup for jquery). youi can use any way to perform
with css you need to add text in th like
<h2 class="heading">This is heading</h2>
and css will
h2.heading {
position: absolute;
bottom: 101px;
color: #fff;
opacity:0;
margin-left: 99px;
}
th:hover .heading
{
opacity:1;
}
with jquery
add this style
h2.heading {
position: absolute;
bottom: 101px;
color: #fff;
display:none;
margin-left: 99px;
}
and script
$(document).ready(function()
{
$('th').hover(function()
{
$(this).find('.heading').show();
})
})
I have a my site background seperated into 4 divs so they each take
up 25% of the page
The goal is to have an overlay fade in when hovered over (which I applied to the first image - #nw)
The problem is that I cannot get the text from class .caption to show up
The code is below:
CSS
.overlaytext {font-family: 'Raleway', sans-serif;}
body { height:100%; margin:0; padding:0; }
div.bg { position:fixed; width:50%; height:50% }
#NW { top:0; left:0; background-image: url('clevelandnight.jpg'); background-size:cover;}
#NE { top:0; left:50%; background-image: url('news1.jpg'); background-size:cover;}
#SW { top:50%; left:0; background-image: url('drinks1.jpg'); background-size:cover;}
#SE { top:50%; left:50%; background-image: url('clevelandday.jpg'); background-size:cover;}
.overlay {
background:rgba(0,0,0,.75);
opacity:0;
height:100%;
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
-ms-transition: all .4s ease-out;
transition: all .4s ease-out;
}
#nw:hover .overlay {
opacity: 1;
height:100%;
}
.caption {
font-color:white;
z-index:100;
}
HTML
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<title>Craig Does Cleveland</title>
<link href='stylesheet2.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div id='nw' class='bg'>
<div class='overlay'>
</div>
<span class='caption'>Hello World</span>
</div>
<div id='ne' class='bg'>
<div class='overlay'>
<span class='caption'>Hello World</span>
</div>
</div>
<div id='sw' class='bg'>
<div class='overlay'>
<span class='caption'>Hello World</span>
</div>
</div>
<div id='se' class='bg'>
<div class='overlay'>
<span class='caption'>Hello World</span>
</div>
</div>
</body>
</html>
1) In your HTML markup, the 4 divs are not the same, change the first one to another:
<div id='nw' class='bg'>
<div class='overlay'>
<span class='caption'>Hello World</span>
</div>
</div>
2) In your CSS, you used ID with uppercase, in your HTML they are in lowercase, change them:
#nw { top:0; left:0; background-image: url('clevelandnight.jpg'); background-size:cover;}
#ne { top:0; left:50%; background-image: url('news1.jpg'); background-size:cover;}
#sw { top:50%; left:0; background-image: url('drinks1.jpg'); background-size:cover;}
#se { top:50%; left:50%; background-image: url('clevelandday.jpg'); background-size:cover;}
3) You wrote hover only for the first element (nw), change it to work for all:
.bg:hover .overlay {
opacity: 1;
height:100%;
}
JSFiddle Demo.
I'm trying to set multiple black transparency images on hover multiple thumbnail images and each image has a different position. To ensure this, each image has his own class (img1, img2, img3...) with different margins defined.
HTML
<div data-content="Text here" class="image">
<div class="img1">
<img src="../img1">
</div>
</div>
<div data-content="Text here" class="image">
<div class="img2">
<img src="../img2">
</div>
</div>
CSS IMG
.img1 {
height:200px;
position:relative;
margin-top:-10%;
}
.img2 {
height:200px;
position:relative;
left:10%;
}
CSS TRANSPARENCY
.image {
position:relative;
width:200px;
height:200px;
}
.image img {
width:100%;
vertical-align:top;
}
.image:after {
content: attr(data-content);
color:#fff;
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:hover:after {
opacity:1;
}
I think you may have too many wrappers but here is one way with a slightly simpler structure
JSfiddle
HTML
<div class="thumbnail" data-content="Text here">
<img src="http://lorempixel.com/output/people-q-c-200-200-5.jpg"/>
</div>
<div class="thumbnail" data-content="Text here">
<img src="http://lorempixel.com/output/transport-q-c-200-200-6.jpg"/>
</div>>
CSS
.thumbnail {
display: inline-block;
position: relative;
}
.thumbnail a,
.thumbnail a img {
display: block;
}
.thumbnail:after {
content: attr(data-content);
color:transparent;
position:absolute;
width:100%; height:100%;
top:0;
left:0;
background:rgba(0,0,0,0.0);
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.thumbnail:hover:after {
background:rgba(0,0,0,0.6);
color:#fff;
}