Hello,
I'm looking for a very simple to use piece of code or something similar where I can hover over an image and there will be some opacity to it, and maybe a shadow around the edge of the image where then text will appear with a title and then some text. I've looked around and found so many but none I have been able to implement properly into my code without it breaking and me just getting frustrated to the point of giving up with that particular one.
It's only going to be for the Profiles page on the teamshift.co.uk website in which each of the images will have text when you hover over the image. Right now I know those images are all the same, it's just for testing purposes and will be updated once it's all working. If anyone knows of an EASY to implement code for something like this then please let me know.
Or if you are really really really kind and could implement it yourself and then paste me the relevant code that would be super amazing too as I'm pretty rubbish at implementing big bits of code and will probably end up asking how to do this that and the other anyway, so it might save us all time.
style.css
* {
margin: 0;
padding: 0;
}
html, body, #wrap {
height: 100%;
}
body > #wrap {
height: auto;
min-height: 100%;
}
#main {
padding-bottom: 470px;
}
body {
background-color: #000000;
}
a, a:visited {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #FF9000;
}
p {
color: #FFFFFF;
}
.welcome {
background-color: #141414;
border-radius: 20px 20px 20px 20px;
height: auto;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
padding-top: 15px;
width: 985px;
}
.content {
background-color: #282828;
border-radius: 20px 20px 20px 20px;
height: 860px;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
position: relative;
text-align: center;
top:100px;
width: 1050px;
}
.contentProfile {
background-color: #282828;
border-radius: 20px 20px 20px 20px;
height: 1060px;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
position: relative;
text-align: center;
top:100px;
width: 1050px;
}
.line {
border-top: 3px solid #212121;
display: block;
margin: 0px 0px 10px;
padding: 0px 20px 0px 0px;
width: auto;
}
#footer {
background: url("../images/footer.png") repeat-x scroll center top transparent;
bottom: 0%;
clear: both;
height: 370px;
margin: -380px 0px 0px 0px;
min-width: 100%;
position: relative;
}
.titleFont1 {
color: #FF9000;
font-family: Skranji;
font-size: 25px;
}
.titleFont2 {
color: #FFFFFF;
font-family: Skranji;
font-size: 25px;
}
.sidebar1 {
background-color: #fff;
border-radius: 20px 20px 20px 20px;
float: left;
height: 370px;
margin-left: 33px;
padding-top: 15px;
width: 320px;
display: block;
}
.sidebar2 {
background-color: #FF9000;
border-radius: 20px 20px 20px 20px;
float: left;
height: 370px;
margin-left: 12px;
padding-top: 15px;
width: 320px;
}
.sidebar3 {
background-color: #fff;
border-radius: 20px 20px 20px 20px;
float: left;
height: 370px;
margin-left: 12px;
padding-top: 15px;
width: 320px;
}
.sidebar4 {
background-color: #FF9000;
border-radius: 20px 20px 20px 20px;
float: left;
height: 370px;
margin-left: 33px;
margin-top: 15px;
padding-top: 15px;
width: 320px;
}
.sidebar5 {
background-color: #fff;
border-radius: 20px 20px 20px 20px;
float: left;
height: 370px;
margin-left: 12px;
margin-top: 15px;
padding-top: 15px;
width: 320px;
}
.sidebar6 {
background-color: #FF9000;
border-radius: 20px 20px 20px 20px;
float: left;
height: 370px;
margin-left: 12px;
margin-top: 15px;
padding-top: 15px;
width: 320px;
}
/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
profile.php
<?php
$home = true;
$title = 'Home';
include('header.php');
?>
<br > <br > <br >
<div id="wrap">
<div id="main" class="bg clearfix">
<div class="clear"></div>
<div class="grid_12 content-spacer">
<div class="contentProfile">
<div class="welcome">
<span class="titleFont1">TEAMSHIFT</span>
<span class="titleFont2">PROFILES</span>
<div class="line"></div>
<p>TeamShift is a professional free running/parkour team based in Reading, UK.
The team is based entirley on close friends of each other who train on a
regular basis in and out of the town centre. With them ranging from as young as
15 to the ages of 30, they assist each other in developing their skills with
Free Running and Parkour even further.</p>
<p>
<span class="titleFont1">Check out our interview</span>
<span class="titleFont2">on Blast 1386!</span>
</p>
<div class="c2"></div>
<div class="c3"></div>
</div>
<div class="sidebar1">
<img src="images/Profiles/AdamH.jpg" height="355" width="280" alt="AdamH" />
</div>
<div class="sidebar2">
<img src="images/Profiles/RossiM.jpg" height="355" width="280" alt="RossiM" />
</div>
<div class="sidebar3">
<img src="images/Profiles/RossiM.jpg" height="355" width="280" alt="RossiM" />
</div>
<br />
<div class="sidebar4">
<img src="images/Profiles/AdamH.jpg" height="355" width="280" alt="AdamH" />
</div>
<div class="sidebar5">
<img src="images/Profiles/RossiM.jpg" height="355" width="280" alt="RossiM" />
</div>
<div class="sidebar6">
<img src="images/Profiles/RossiM.jpg" height="355" width="280" alt="RossiM" />
</div>
</div><!-- end of .content -->
</div><!-- end of .grid_12 -->
</div><!-- end of #bg -->
</div><!-- end of #wrap -->
<?php
include('footer.php');
?>
