Image Hover Effect

Create index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RSE Media</title>
<link href="css/style.css" rel="stylesheet" type="text/css">

<style>

.triangle-topleft {
  opacity: 0.75;
   border-right: 263px solid transparent;
   
 border-top: 170px solid #006666;
    height: 0;
    width: 0;
 position: absolute;
}
.triangle-topleft h2{
color:#9F9F9F;
font-weight:bold;
text-align:left;
padding:5px;
}
.triangle-topleft p{
color:#FFFFFF;
text-align:left;
width: 113px;
padding:2px;
}
.textme{
position:absolute;
margin-top: -168px;
 width: 189px;
  height: 165px;
}

</style>

</head>

<body>

<section class="work">
<section class="wrap">
     
 <ul>
     <li>
     <a href="#">
     <div class="trans-div"><img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg" width="294" height="170" alt="design1"></div>
      <div class="triangle-topleft">      
          <div class="textme">
             <h2>Image1</h2>
                <p>Photography By</p>
                    <p><b>RAM</b></p>
                              
        </div>
           
     </div><img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg" width="294" height="170" alt="design1">
       </a>
   </li>
            
            
            
          <li class="mid">
          <a href="#">
          <div class="trans-div">
          <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg" width="294" height="170" alt="design2"></div>
          <div class="triangle-topleft"> 
          <div class="textme">
            <h2>Image2</h2>
            <p>Photography By</p>
            <p>RAM</p>
            
            </div>
            
          </div><img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg" width="294" height="170" alt="design1">
          </a>
          </li>
          
          
          <li>
          <a href="#">
          <div class="trans-div">
         
          <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg" width="294" height="170" alt="design2"></div>
          <div class="triangle-topleft">
          <div class="textme"> 
            <h2>Image3</h2>
            <p>Photography By</p>
            <p>RAM</p>
            
            </div>
          </div>
          <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg" width="294" height="170" alt="design1">
          </a>
          </li>
</ul>
</section>
</section>

</body>
</html>

Create style.css

.work{
 width:100%;
 padding-bottom:70px;
 float:left;
}
.work h3{
 /*color:#fff;*/
 font-size:38px;
 padding:190px 0 74px 0;
 text-align:center;
 text-transform:uppercase;
 font-weight:400;
 display:block;
 font-family: 'HelveticaNeueCondensedBlack';
 color: #d10101;
    text-shadow: 1px 1px 1px #333;
}
.work ul{
 text-align:center;
}
.work li{
 background:#fff;
 width:94%;
 margin-bottom:65px;
 padding:8px;
 position:relative;
 display:inline-block;
}
.work li img{width:100%;}
.work li.mid{margin:0 0 65px 0;}
.work li a .trans-div{
 width:100%;
 height:100%;
 position:absolute;
 z-index:100;
 /*top:0;*/
 top:-70px;
 left:0;
 display:none;
}
.work li a .trans-div img{margin:22% 0 0 0; width:100%;}
.work li a:hover .trans-div{display:block;}
.work a.view{
 width:142px;
 height:52px;
 line-height:52px;
 margin:0 auto;
 color:#fff;
 font-size:18px;
 border:1px solid #fff;
 text-align:center;
 text-transform:uppercase;
 display:block;
}
.work a.view:hover{
 background:#be0004;
 border:1px solid #be0004;
}

/*-----------------------Responsive----------------*/

.wrap{
 width:90%;
 position:relative;
}
.search{width:87%; margin-bottom:0;}
.common{width:100%; margin: 35px 0 0 0}
.common.mid{margin:35px 0 0 0;}
.work ul{
    width: 100%;
 text-align:center;
}
.work li{
 background:#fff;
 width:auto;
 margin-bottom:65px;
 padding:8px;
 display:inline-block;
}
.testimonial li {
    padding: 60px 0 0 0;
    width: 100%;
 text-align:left;
}
nav{width:100%; background:#ececec; display:none; position: absolute;  top: 45px;}
nav li{width:100%; display:block; padding:0;}
nav li a{
 padding:10px;
 display:block;
}
.caption{
 width:92%;
 position:relative;
 margin:50px 2%;
 padding:10px 2%;
 line-height:44px;
 color:#fff;
 font-size:22px;
}
.slider-horizontal .item {background:#fff; width:470px; margin:0 5px 50px;}
.resp-tabs-list li {
    padding: 20px 28px;
}
.testimonial img{
 float:left;
}
.testimonial img:hover{
border:10px solid #CC0000;
border-radius:50%;
}
.testimonial h5{
 /*color:#404040;*/
 padding:0 0 0 134px;
 text-transform:uppercase;
 
 /*modified by navin*/
 color: #d10101;
    
   
    text-shadow: 1px 1px 1px #333;
 /*modification done*/
}
.testimonial p{
 color:#434343;
 line-height:30px;
 padding:20px 0 20px 134px;
}
.testimonial span{color:#7d7d7d; padding:0 0 0 134px;}

.wrap{
 width:90%;
}
.logo {
    float: none;
    width: 187px;
 margin:0 auto 30px auto;
}
header{padding-bottom:0;}
nav{
 background:none;
 width:77%;
 float:left;
 position:relative;
 margin:0;
 top:0;
 display:block;
}
nav li{
 width:auto;
 color:#000;
 font-size:13px;
 padding:10px 0 23px 0;
 border-bottom:2px solid #fff;
 float:left;
}
nav li:hover, nav li.active{
 border-bottom:2px solid #c31112;
}
.slider-block{
 margin:209px 0 0 0;
}
.banner{
 background:url(../images/banner.jpg) no-repeat center center;
}
.click-menu{display:none;}
.search{width:100px;}
.caption {
    font-size: 20px;
    position: absolute;
 line-height:27px;
    right: 0;
 top:84px;
    width: 36%;
}
.work li, .work li.mid {
    margin: 0 2% 30px;
}
.testimonial li {
    padding: 60px 0 0 0;
    width: 100%;
}
.work a.view{margin:30px auto 0 auto;}
.search {
    width: 90px;
}
nav li a {
 color:#000;
    padding: 0 10%;
 display:block;
}
.work ul{
    width: 100%;
 text-align:center;
}
.work ul li{
 display:inline-block;
 float:none;
}
.common{
 width:30%;
}
.feature-services .common{width:29%; padding:0 2%;}
.common.mid {
    margin: 35px 5% 0;
}
.search{margin:5px 0 0 0;}
.mobile-banner{margin:192px 0 0 0;}

.wrap{width:980px;}
.caption {
    right: 8px;
    width: 370px;
 top:84px;
 font-size:20px;
 line-height:32px;
 font-weight:normal;
}
nav{width:83%;}
nav li a {
    padding: 0 26px;
}
.work li{margin:0 0 20px 0;}
.work li.mid {
    margin: 0 2% 20px;
}
.testimonial h5{
 padding:0 0 0 120px;
}
.testimonial p{
 padding:20px 0 20px 120px;
}
.testimonial span{padding:0 0 0 120px;}
.testimonial li{
 width:48%;
 padding:60px 2% 0 0;
 float:left;
}
.img-div{
 width:40%;
 margin:15px 0;
 text-align:left;
 float:left;
}
.img-div img{width:100%;}
.mobile-app .mobile-content{
 width:47%;
 padding:0 0 0 3%;
 float:left;
}

.wrap{
 width:1072px;
}
.logo {
    float: none;
    width: 187px;
 margin:0 auto 30px auto;
}
header.smaller .logo {
    float: left;
 margin-top:0;
    width: 187px;
}
nav{width:80%;}
header.smaller nav li a{padding:0 13px;}
header.smaller nav{width:62%; margin:25px 0 0 5%;}
nav li{font-size:16px;}
nav li a {
    padding:0 28px;
}
header.smaller .search{
 margin:35px 0 0 0;
}
.search{
 margin:0;
}
.caption{
 width:440px;
 right:99px;
 top:83px;
}
.work li{margin:0 0 65px 0;}
.work li.mid{margin:0 6% 65px 6%;}
.testimonial h5{
 padding:0 0 0 134px;
}
.testimonial p{
 padding:20px 0 20px 134px;
}
.testimonial span{padding:0 0 0 134px;}
.testimonial li{
 width:48%;
 padding:60px 2% 0 0;
 float:left;
}
.slider-block{margin:208px 0 0 0;}
.mobile-banner{margin:208px 0 0 0;}

.featured-client .video{
 width:90%;
 margin-bottom:0;
 float:right;
}
.featured-client ul{
 text-align:center;
 display:block;
}
.featured-client li{width:48%; display:inline-block;}
.description{
 background:#f7f7f7;
 width:70%;
 margin:0 0 0 28px;
 padding:20px 2%;
 text-align:left;
 float:left;
}
.description h5{
 color:#3e4245;
 font-weight:400;
 font-size:18px;
 padding-bottom:30px;
 text-transform:uppercase;
}
.description p{
 color:#3e4245;
 font-weight:400;
 font-size:15px;
 line-height:20px;
}
.description span{
 color:#3e4245;
 font-weight:600;
 font-size:15px;
 line-height:20px;
 padding-bottom:0;
 text-align:left;
}
.feature-services .common{width:20%;}
.feature-services .common a{margin:0 auto 34px;}
.feature-services h1{
 background:#ca0000;
 width:auto;
 padding:200px 60px;
 font-size:60px;
 color:#fff;
 font-weight:300;
 float:left;
}
.feature-services h1 span{display:block;}

CSS and CSS3 TutorialS

Search This Blog