Hover color overlay - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Color

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Color

Description

Hover color overlay

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>gallery hover</title> 
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/4.3.1/css/foundation.min.css"> 
  <style>

body {<!-- w ww. jav  a  2s. c o m-->
   background: black
}
#portfolio {
   position: relative;
   z-index: 300;
   padding-bottom: 75px;
   box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.9);
   -o-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.9);
   -ms-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.9);
   -moz-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.9);
   -webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.9);
   background: pink; /* Old browsers */
   background: -moz-radial-gradient(top, ellipse cover,  #ffffff 0%, pink 100%); /* FF3.6+ */
   background: -webkit-gradient(radial, top top, 0px, top top, 100%, color-stop(0%,#ffffff), color-stop(100%,pink)); /* Chrome,Safari4+ */
   background: -webkit-radial-gradient(top, ellipse cover,  #ffffff 0%,pink 100%); /* Chrome10+,Safari5.1+ */
   background: -o-radial-gradient(top, ellipse cover,  #ffffff 0%,pink 100%); /* Opera 12+ */
   background: -ms-radial-gradient(top, ellipse cover,  #ffffff 0%,pink 100%); /* IE10+ */
   background: radial-gradient(ellipse at top,  #ffffff 0%,pink 100%); /* W3C */
}
#filter{
   float:left;
   display:inline-block;
   position: relative;
   font-size: .875em;
   cursor: pointer;
   list-style-type: none;
   padding-top: 7px;
   padding-bottom: 7px;
   margin-bottom: 0em;
}
#filter li {
   float: left;
}
#filter a {
   color: #000;
   padding: 10px 15px;
   margin: 0px 0px 2px 4px;
}
#filter a:hover {
   background-color: #104000;
   color: #FFF;
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   -o-transition: all 0.3s;
   transition: all 0.3s;
}
#filter .current {
   color: #FFF !important;
   background-color: #104000;
}
.portfolio-separator {
   position: relative;
   display: inline-block;
   width: 100%;
   height: 1px;
   background: url(https://www.java2s.com/style/demo/Firefox.png);
   margin-bottom: 15px;
   margin-top: 20px;
}
.dark-screen {
   background: #ccc);
}
.img-holder {
   width: 235px;
   height: 335px;
   overflow: hidden;
   background: rgba(255, 255, 255, 1);
}
.center{
   text-align:center;
}
.img-holder a {
   position: absolute;
   width: 235px;
   height: 335px;
   font-size: 8em;
   color: rgba(255,255,255, 0.3);
   text-align: center;
   background: rgba(255, 255, 255, 0.8);
   opacity:0;
}
a .link {
   cursor: pointer;
}
.overlay:hover {
   background: #909090;
   z-index: 301;
}
#gallery {
   list-style: none;
   overflow: auto;
   min-width: 442px;
}
#gallery li {
   float: left;
   padding: .406em;
}
.img-holder a:hover {
   box-sizing: border-box;
   background: rgba(170, 170, 170, 0.8);
   opacity:1;
   -webkit-transition: opacity 1s ease-out;
}


      </style> 
 </head> 
 <body translate="no"> 
  <ul id="gallery"> 
   <li class="b c d"> <a href="" class="link"> </a> 
    <div class="img-holder overlay"> 
     <a href="" class="link"></a> 
     <a>+</a> 
     <img src="https://www.java2s.com/style/demo/Opera.png"> 
     <h3 class="center">test</h3> 
     <h4 class="center">test</h4> 
    </div> </li> 
  </ul>  
 </body>
</html>

Related Tutorials