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.
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'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;
}
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;
}
I'm trying to get this CSS effect into the middle of all of these boxes, and add a fade just like this site demo's http://dinolatoga.com/demo/webkit-image-hover-effects/ (the bottom right effect) But I don't know how to re-size the effect to fit into these boxes here's happens when I run my code http://jsfiddle.net/TWebQ/
and here's my code:
<! DOCTYPE HTML>
<html>
<head>
<div>
<img src="http://img.photobucket.com/albums/v604/Ema/header-winter-castle-900x200.jpg" class="banner">
</>
</div>
<style media="screen" type="text/css">
.container{
overflow:hidden;
width:450px;
margin:0px auto;
}
.box{
width:200px;
height:200px;
float:left;
background-color:#ccc;
margin-bottom:20px;
border:1px solid black;
padding:1px;
}
.spacing{
margin-right:20px;
}
.banner{
margin:0 auto;
display:block;
border:4px solid black;
padding:5px;
}
#one{
position:relative;
}
#one img{
position:absolute;
top:0;
left:0;
z-index:0;
}
#one .detailsone{
opacity: .9;
position:absolute;
top:100;
left:150;
z-index:999;
-webkit-transform: scale(0);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
padding-right:200px;
}
#one:hover .detailsone{
-webkit-transform: scale(1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
padding-right:100px;
}
</style>
</head>
<body>
<div class="container">
<div class="box spacing" id="one";><a href="http://www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%">
</a>
<div class="detailsone">
<h1 style="color:black"> <u> Enter </u> </h1>
</div>
</div>
<div class="box spacing"id="two";><a href="http://www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%">
</a>
<div class="detailstwo">
<h1 style="color:black"> <u> Enter </u> </h1>
</div>
</div>
<div class="box spacing"id="three";><a href="http://www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%">
</a>
<div class="detailsthree">
<h1 style="color:black"> <u> Enter </u> </h1>
</div>
</div>
<div class="box spacing"id="four";><a href="http://www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%" >
</a>
<div class="detailsfour">
<h1 style="color:black"> <u> Enter </u> </h1>
</div>
</div>
</div>
</body>
</html>
Any help would be appreciated, If I find a answer I'll update this thread, Thank you for reading.
First you do have to cleanup your HTML to something like this:
<body>
<div>
<img src="http://img.photobucket.com/albums/v604/Ema/header-winter-castle-900x200.jpg" class="banner"/>
</div>
<div class="container">
<div class="box spacing" id="one">
<img src="http://www.wilsoninfo.com/300x300.gif" width="100%"/>
<div class="detailsone">
<h1>Enter</h1>
</div>
</div>
<div class="box spacing" id="two">
<img src="http://www.wilsoninfo.com/300x300.gif" width="100%"/>
<div class="detailstwo">
<h1>Enter</h1>
</div>
</div>
<div class="box spacing" id="three">
<img src="http://www.wilsoninfo.com/300x300.gif" width="100%"/>
<div class="detailsthree">
<h1>Enter</h1>
</div>
</div>
<div class="box spacing" id="four">
<img src="http://www.wilsoninfo.com/300x300.gif" width="100%"/>
<div class="detailsfour">
<h1>Enter</h1>
</div>
</div>
</div>
</body>
Also, you might want to consider if you do want to use multiple H1 tags without a good reason.
read more about this in the article on-page-seo-multiple-h1-elements on website-in-a-weekend.net/
And if your css is like this it will work:
.container{
overflow:hidden;
width:450px;
margin:0 auto;
}
.box{
width:200px;
height:200px;
float:left;
background-color:#ccc;
margin-bottom:20px;
border:1px solid black;
padding:1px;
}
.spacing{
margin-right:20px;
}
.banner{
margin:0 auto;
display:block;
border:4px solid black;
padding:5px;
}
#one{
position:relative;
height:200px;
width:200px;
}
#one img{
position:absolute;
top:0;
left:0;
z-index:0;
}
.box h1{
color:black;
}
#one .detailsone{
height:200px;
width:200px;
opacity: .9;
position:absolute;
text-align:center;
z-index:999;
-webkit-transform: scale(0);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
}
#one:hover .detailsone{
-webkit-transform: scale(1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
}
See it in action on this jsFiddle: http://jsfiddle.net/jwvanveelen/KW5Uh/