So I'm trying to make a image gallery only with css.
I want the text div to cover all of my "background-image" when I pass the cursor on it.
Right now the background of text does not cover it totally.
Any help is appreciated.
<!doctype html>
<head>
<meta charset="UTF-8">
</head>
<style>
#media only screen and (min-width: 769px) {
.gridContainer {
width: 88.2%;
max-width: 1232px;
padding-left: 0.9%;
padding-right: 0.9%;
margin: auto;
}
#mainWrapper{
width:100%;
}
.contentor{
display:block;
width:33.3%;
height:auto;
position:relative;
margin:0;
float:left;
}
.imagem{
display:block;
position:relative;
width:100%;
height:auto;
left:0;
top:0;
}
.texto{
display:block;
z-index:100;
position:absolute;
font-size: 3em;
font-weight:bold;
left:50%;
top:35%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align:center;
background: rgba(153, 102, 0, 0.6);
transition: opacity 2s; /* efeito trans */
opacity:0;
}
.contentor:hover .texto{
opacity:1;
}
}
</style>
<div class="contentor">
<img class="imagem" src="IMGS/index_amb.jpg"/>
<p class="texto">texto por cima</p>
</div>
<div class="contentor">
<img class="imagem" src="IMGS/index_fuller.jpg"/>
<p class="texto">texto por cima</p>
</div>
<div class="contentor">
<img class="imagem" src="IMGS/index_ft_rain.jpg"/>
<p class="texto">texto por cima</p>
</div>
<div class="contentor">
<img class="imagem" src="IMGS/index_manual.jpg"/>
<p class="texto">texto por cima</p>
</div>
<div class="contentor">
<img class="imagem" src="IMGS/index_pecados.jpg"/>
<p class="texto">texto por cima</p>
</div>
<div class="contentor">
<img class="imagem" src="IMGS/index_e_r.jpg"/>
<p class="texto">texto por cima</p>
</div>
</div>
Have a look at jQuerys hover() and mouse over() methods.
Sorry. I haven't tested this but I would think that you would need to set the CSS element to .hidden and then use the mouseenter, mouseover event to reset the CSS.
Related
I am new to HTML CSS. I am practicing to make a website.I am trying to create an image slider. On setting display: flex the flex-shrinks even if flex-grow is given?
For that I took a div container(class name is content) and inside that I took 3 other div container(class name is inner-content). After setting css properties for those 3 containers and if I set display:flex on outer div container the flex shrinks. I don't want that. I tried flex-basis but it doesn't work?
/=======Image before applying display:flex;===/
/=======Image after applying display:flex;===/
.content{
margin-top: 10px;
display:flex;
height:85vh;
background: yellow;
width: 100%;
/* overflow: hidden; */
padding:0px;
}
.inner-content{
padding:75px 50px 0px;
display:flex;
margin: auto;
border: 1px solid black;
}
.cont{
flex:1.5;
padding:90px 0px 0px 50px;
background: chocolate;
}
.cont h3{
font-size:30px;
padding-bottom: 10px;
letter-spacing: 1px;
text-shadow: 1px 0px black;
}
.cont p{
font-size:20px;
padding-bottom: 10px;
}
.cont button{
width:150px;
margin:auto;
height:11%;
margin-top:10px;
font-size:18px;
border:2px solid #072085;
color:#072085;
background: white;
border-radius:20px;
text-align: center;
}
.image-container{
align-items: center;
z-index: 1;
flex:1;
}
.image-container img{
max-width: 300px;
height: auto;
margin:0 auto;
animation:drop 1.5s ease;
z-index: 1;
}
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500&display=swap" rel="stylesheet">
<div class="main-page">
<div class="content">
<div class="inner-content">
<div class="cont">
<h3>Redmi Note 8</h3>
<p>48MP AI rear camera with Sony IMX586 camera sensor</p>
<button href="#">BUY NOW</button>
</div>
<div class="image-container">
<img src="1.png"/>
</div>
</div>
<!----2nd-->
<div class="inner-content">
<div class="cont">
<h3>Redmi Note 8</h3>
<p>48MP AI rear camera with Sony IMX586 camera sensor</p>
<button href="#">BUY NOW</button>
</div>
<div class="image-container">
<img src="1.png"/>
</div>
</div>
<!----3rd-->
<div class="inner-content">
<div class="cont">
<h3>Redmi Note 8</h3>
<p>48MP AI rear camera with Sony IMX586 camera sensor</p>
<button href="#">BUY NOW</button>
</div>
<div class="image-container">
<img src="1.png"/>
</div>
</div>
</div>
</div>
You need to give min-width to your inner-content. Run the snippet and check in full page.
I am assuming you know how to implement slider functionality.
.content{
margin-top: 10px;
display:flex;
background: yellow;
width: 100%;
padding:0px;
overflow-x: scroll;
}
.inner-content{
padding:75px 50px 0px;
display: flex;
flex: 1;
border: 1px solid black;
min-width: 90vw;
}
.cont{
padding:90px 0px 0px 50px;
background: chocolate;
}
.cont h3{
font-size:30px;
padding-bottom: 10px;
letter-spacing: 1px;
text-shadow: 1px 0px black;
}
.cont p{
font-size:20px;
padding-bottom: 10px;
}
.cont button{
width:150px;
margin:auto;
height:11%;
margin-top:10px;
font-size:18px;
border:2px solid #072085;
color:#072085;
background: white;
border-radius:20px;
text-align: center;
}
.image-container{
align-items: center;
z-index: 1;
flex:1;
}
.image-container img{
max-width: 300px;
height: auto;
margin:0 auto;
animation:drop 1.5s ease;
z-index: 1;
}
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500&display=swap" rel="stylesheet">
<div class="main-page">
<div class="content">
<div class="inner-content">
<div class="cont">
<h3>Redmi Note 8</h3>
<p>48MP AI rear camera with Sony IMX586 camera sensor</p>
<button href="#">BUY NOW</button>
</div>
<div class="image-container">
<img src="https://static.toiimg.com/thumb/msid-70348099,width-320,resizemode-4,imgv-5/Xiaomi-Redmi-Note-8-Pro.jpg"/>
</div>
</div>
<!----2nd-->
<div class="inner-content">
<div class="cont">
<h3>Redmi Note 8</h3>
<p>48MP AI rear camera with Sony IMX586 camera sensor</p>
<button href="#">BUY NOW</button>
</div>
<div class="image-container">
<img src="https://static.toiimg.com/thumb/msid-70348099,width-320,resizemode-4,imgv-5/Xiaomi-Redmi-Note-8-Pro.jpg"/>
</div>
</div>
<!----3rd-->
<div class="inner-content">
<div class="cont">
<h3>Redmi Note 8</h3>
<p>48MP AI rear camera with Sony IMX586 camera sensor</p>
<button href="#">BUY NOW</button>
</div>
<div class="image-container">
<img src="https://static.toiimg.com/thumb/msid-70348099,width-320,resizemode-4,imgv-5/Xiaomi-Redmi-Note-8-Pro.jpg"/>
</div>
</div>
</div>
</div>
So I created this page but it has a different view on mobile and PC. on website the view is as follows
whereas on mobile the view is as follows:
As as it can be seen, on mobile the whole paragraph moves down the picture. I dont understand why. Everything on the website is kept responsive.. here is the code for this page:-
<!DOCTYPE html>
<html>
<style>
body {
margin: 0;
padding: 0;
}
.head{
height:200px;
width:100%;
border-top:3px solid purple;
overflow:hidden;
font-family:calibri;
}
.responsive {
width: 100%;
height: auto;
transition:2s;
position: relative;
filter: brightness(50%);
}
.responsive:hover{
transform:scale(1.4);
filter: brightness(80%);
}
#media only screen and (max-width: 401px) {
.below{
height:320px;
}
}
#media only screen and (max-width: 391px) {
.responsive {
height: 300px;
}
}
.centered {
position: absolute;
top: 83%;
margin-left:50%;
color:white;
text-shadow: 2px 2px 4px #000000;
transform: translate(-50%, -50%);
font-family:calibri;
}
.line {
position: absolute;
top: 95%;
margin-left:50%;
width:80%;
height:2px;
border-radius: 50px;
border:2px solid black;
background:white;
text-shadow: 4px 4px 4px #000000;
transform: translate(-50%, -50%);
}
.text{
position: absolute;
top: 100%;
font-family:calibri;
margin-left:50%;
margin-top:10%;
width:65%;
color: white;
text-shadow: 4px 4px 6px #000000;
transform: translate(-50%, -50%);
}
.textfont{
font-size:2.4vw;
}
.end{
margin:auto;width:160px;
}
.below{
float:left; width:100%; height:260px;border-bottom:2px solid purple;font-family:calibri;
}
</style>
<body>
<div class="head">
<div class="left">
<img src="logo.png" style="height:150px; width:150px;">
</div>
<div class="left1">
<h2 style="font-family:Bell MT"> INSTITUTE </h2>
<p> EDUCATION </p>
</div>
<div class="nav">
<ul style="list-style:none;">
<li><B>HOME</B></li>
<li><B>MISSION</B></li>
<li><B>CLASS</B></li>
<li><B>CONTACT</B></li>
</ul>
</div>
</div>
<div style="overflow:hidden;">
<img src="bg.jpg" class="responsive">
<h1 class="centered"><b>
ABOUT US</b>
</h1>
</br>
<div class="line">
</div>
<div class="text"><font class="textfont">
SFHI SDI DSIH FSHIFSHIFSH FSHISHF HFS ISFH IFHSIISF FHSIHISF FSHI IHFS HISF H FISHF ISIFHS FHSFSIH H SFIIS FHFHI SFHSIFSHIF SF SFIH SFH SFHHFS OFHS F SOHHFS IFSSFHI FHSI FSHFSH OSF SOHF SOHF OHFS FHS OF H SOFSOH OSFH SHFOHFOS HFSH OFHOSF FOHSFHOSHF SHOFSOHF SOHF HOS FSOH FSHO FSO
</font>
</div>
</div>
<div class="below">
<center>
<h2 style="padding:10px;"> INSTITUTE </h2>
<br>
999323 - 32U932
<br><br>
5 St, Block 7
<br><br>
</center>
<div class="end" >
<img src="fb.png" height="50" width="50" style="float:left;">
<img src="instagram.png" height="57" width="58" style="float:left; margin-top:-3px;">
<img src="location.png" height="43" width="43" style="float:left; margin-top:3px;">
</div>
</div>
</body>
</html>
You may need to use a viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
See w3schools: https://www.w3schools.com/css/css_rwd_viewport.asp
I am building a website and right now I'm just about to complete the homepage. Now, the footer has a few links in it along with a few images next to each other like a contact us bar. But the links don't seem to align with the images even after trying everything. They seem to hang a little lower than the paragraphs or spans. I tried converting the spans on the same line to links but now all of them hang low.
HTML:
<div id="brdr_btm">
<div id="contactOptionContainer">
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/pGiDhI2.png?1"/>
<div id="ctcLinks">
La Martiniere College, Lucknow
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/E8Ow3O7.png?1">
<div id="ctcLinks">
secretariat#lmun.org
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" id="ic_call" src="http://i.imgur.com/1di7mj9.png?1">
<!--<div id="phoneno">-->
<div id="ctcLinks">
+91 9670680417 (Sec. Gen), <!-- was span -->
+91 9415444444 (Dep. Sec. Gen) <!-- was span -->
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/2HZVi1r.png?1">
</div>
</div>
</div>
CSS:
#brdr_btm
{
display:flex;
position:relative;
height: 25px;
width: 100%;
background-color: #70A5DA;
top:100%;
vertical-align:bottom;
margin_top:10px;
clear:both;
box-sizing:content-box;
/*z-index:-1;*/
}
#contactUs
{
margin:auto;
}
#contactOptionContainer
{
position:relative;
display:inline-block;
margin-top:auto;
margin-bottom:auto;
/* text-align:center;*/
box-sizing:content-box;
width:auto;
}
.ctcObject
{
display:inline-block;
margin-left:auto;
margin-right:5em;
/* margin-bottom:6px;*/
/* margin-top:auto;*/
}
.ic_contact
{
position:relative;
margin-top:6.25px;
margin-bottom:6.25px;
height: 12.5px;
width: 12.5px;
-webkit-user-drag:none;
user-select:none;
-ms-user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
user-drag:none;
/* z-index:-1;*/
}
#ic_call
{
margin-top: -2px;
height:10.5px;
width:10.5px;
}
#ctcLinks
{
position:relative;
display:inline-block;
}
#ctcLinks a
{
position:relative;
margin-top:-6px;
margin-bottom:0px;
/* display:inline-block;*/
font-size:0.8em;
color:#FFFFFF;
/* text-align:center;*/
}
#phoneno
{
position:relative;
display:inline-block;
text-align:center;
}
#phoneno span
{
margin-left:0;
margin-right:0;
margin-bottom:6px;
margin-top: -1px;
text-align:center;
display:inline-block;
color:#ffffff;
vertical-align:middle;
font-size:0.9em;
}
How do I prevent this from happening and what causes it?
What might be the solution to the problem?
Here's my JSFiddle: http://jsfiddle.net/mfxefccz/
You should add to .ic_contact and #ctcLinks this style
display: inline-block;
height: 100%;
vertical-align: middle;
#brdr_btm
{
display:flex;
position:relative;
height: 25px;
width: 100%;
background-color: #70A5DA;
top:100%;
vertical-align:bottom;
margin_top:10px;
clear:both;
box-sizing:content-box;
/*z-index:-1;*/
}
#contactUs
{
margin:auto;
}
#contactOptionContainer
{
position:relative;
display:inline-block;
margin-top:auto;
margin-bottom:auto;
/* text-align:center;*/
box-sizing:content-box;
width:auto;
}
.ctcObject
{
display:inline-block;
margin-left:auto;
margin-right:5em;
/* margin-bottom:6px;*/
/* margin-top:auto;*/
}
.ic_contact
{
position:relative;
margin-top:6.25px;
margin-bottom:6.25px;
height: 12.5px;
width: 12.5px;
display: inline-block;
height: 100%;
vertical-align: middle;
-webkit-user-drag:none;
user-select:none;
-ms-user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
user-drag:none;
/* z-index:-1;*/
}
#ic_call
{
margin-top: -2px;
height:10.5px;
width:10.5px;
}
#ctcLinks
{
position:relative;
display: inline-block;
height: 100%;
vertical-align: middle;
display:inline-block;
}
#ctcLinks a
{
position:relative;
margin-top:-6px;
margin-bottom:0px;
/* display:inline-block;*/
font-size:0.8em;
color:#FFFFFF;
/* text-align:center;*/
}
#phoneno
{
position:relative;
display:inline-block;
text-align:center;
}
#phoneno span
{
margin-left:0;
margin-right:0;
margin-bottom:6px;
margin-top: -1px;
text-align:center;
display:inline-block;
color:#ffffff;
vertical-align:middle;
font-size:0.9em;
}
<div id="brdr_btm">
<div id="contactOptionContainer">
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/pGiDhI2.png?1"/>
<div id="ctcLinks">
La Martiniere College, Lucknow
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/E8Ow3O7.png?1">
<div id="ctcLinks">
secretariat#lmun.org
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" id="ic_call" src="http://i.imgur.com/1di7mj9.png?1">
<!--<div id="phoneno">-->
<div id="ctcLinks">
+91 9670680417 (Sec. Gen), <!-- was span -->
+91 9415444444 (Dep. Sec. Gen) <!-- was span -->
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/2HZVi1r.png?1">
</div>
</div>
</div>
Here a demo.
So, displayed it like an inline-block, because display: inline-block; don't work with blocks. And give then a height: 100%. In this case in means 100% from a parent. So we always have an image or block in the vertical center.
You have set margins for .ic_contact. If you remove margin-bottom for .ic_contact, your images and links would align properly. see here
.ic_contact
{
position:relative;
margin-top:6.25px;
height: 12.5px;
width: 12.5px;
}
Under "School" the second image isnt the same size as any of the other images on my website. How do i resize the image?
JSFIDDLE: http://jsfiddle.net/54k90fof/
(ignore the messed up banner at the top. It looks different in my browser but it looks bad in JSfiddle)
HTML
<!DOCTYPE>
<HTML>
<head>
<meta charset="UTF-8">
<title> My Home Page</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="banner">
<h1> Welcome!<span style="color:#FF009D" class="dot">•</span><span style="color:#12E00B" class="dot">•</span><span style="color:#FF9D00" class="dot">•</span>
</h1>
<div class="Navi">
<nav>
<ul>
<li>About me! </li>
<li>Email me </li>
<li>Photography</li>
</ul>
</nav>
</div>
</div>
<p> Favorite Websites</p>
<div class="wrap">
<div class="wrap-in">
<div class="item">
<a href="https://www.youtube.com/user/maxxchewning">
<img src="http://i.ytimg.com/vi/HrkZQ3EOmFQ/hqdefault.jpg"/>
<div class="button"></div>
</a>
</div>
<div class="item">
<a href="https://www.youtube.com/user/Christianguzmanfitne">
<img src="http://i.ytimg.com/vi/zsD_7hkfEwY/hqdefault.jpg"/>
<div class="button"></div>
</a>
</div>
<div class="item">
<a href="https://www.youtube.com/user/PhysiquesOfGreatness">
<img src="http://v017o.popscreen.com/VzFBeVBjMHhpRWMx_o_new-physiques-of-greatness-intro-25.jpg"/>
<div class="button"></div>
</a>
</div>
<div class="item">
<a href="https://www.reddit.com">
<img src="https://pbs.twimg.com/profile_images/459083822470946816/VGv0AGio.png"/>
<div class="button"></div>
</a>
</div>
<div class="item">
<a href="https://www.ebay.com">
<img src="https://pbs.twimg.com/profile_images/471350614132129793/NCDCFXva.jpeg"/>
<div class="button"></div>
</a>
</div>
<div class="item">
<a href="https://www.facebook.com">
<img src="https://pbs.twimg.com/profile_images/3513354941/24aaffa670e634a7da9a087bfa83abe6_400x400.png"/>
<div class="button"></div>
</a>
</div>
</div>
</div>
<p> School </p>
<div class="wrap">
<div class="wrap-in">
<div class="item">
<a href="https://www.howdy.tamu.edu">
<img src="http://www.ourgeeks.com/wp-content/uploads/2014/02/howdy.tamu_.edu_.jpg"/>
<div class="button"></div>
</a>
</div>
<div class="item">
<a href="https://www.ecampus.edu">
<img src="http://hdc.tamu.edu/files/150_199/191/002_login.jpg"/>
<div class="button"></div>
</a>
</div>
</div>
</div>
<div class="footer"></footer>
</body>
</HTML>
CSS
body {
margin-top:-3px;
min-width:1000px;
}
p {
font-family: Futura;
font-size:20px;
margin-left:10px;
}
nav ul li {
display:inline-block;
font-size:10px;
float:left;
height:200px;
width:100px;
}
.item{
width: 156px;
}
.wrap{
overflow: hidden;
overflow-x: scroll;
width: 960px;
}
.wrap-in{
width: 2500px;
}
.banner {
width:100%;
height:200px;
background-color: rgba(64, 201, 255, 1);
margin-left:-10px;
}
.Navi {
position: absolute; top: 0px; right: 90px;
background-color:rgba(64, 201, 255, 1);
height: 150px;
font-family: Futura;
font-size:10;
}
.Navi ul li a {
text-decoration:none;
color: white;
}
h1 {
font-size:80px;
margin-left:30px;
font-family:Futura;
line-height:120px;
color:rgba(255, 255, 255, 1);
text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
width:100%;
letter-spacing:1px;
padding-top:30px;
}
h1:hover {
font-size:80px;
font-family:Futura;
color: rgba(64, 201, 255,.8);
text-shadow: 2px 2px 3px rgba(255, 255, 255,0.9);
width:100%;
padding-top:30px;
}
.wrap{
margin-top:20px;
width: 100%;
background-color: rgba(255, 190, 77, 1);
height:200px;
margin-left:-10px;
overflow:auto;
}
.item {
float:left;
padding:0px;
margin-left: 40px;
margin-top: 20px;
}
.item img {
width:100%;
padding-top:10px;
max-height:100px;
opacity:1;
}
.item img:hover {
opacity:.4;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
}
.button {
background-color:rgba(64, 201, 255,1);
height:50px;
width:100%;
border-bottom-right-radius:.5em;
border-bottom-left-radius:.5em;
transition: background-color 0.3s linear;
}
.item:hover .button{
background-color: rgba(255, 0, 157, 1);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
}
change max-height:100px to simply height:100px. or else upload the images all in the same width to height ratio, however you are already stretching the image ratio with width:100% soo...
.item img {
width: 100%;
padding-top: 10px;
height: 100px;
opacity: 1;
}
The best way if you want to keep the original image ratio, you should use some server side technology to crop or fill the image to the same ratio. eg, nginx has an image module can do this, and there're a lot libraries in php.
Otherwise, you can add a fixed height and black background-color wrapper div out of the image tag, set the images' vertical align to middle.
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/