I tried to put some contents over an image with some overlay effects, but it does not shows output as my needs. Also I don't know how to do overlay effects anyone can help me please.
.destination {
padding: 20px;
-ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
transition: all .5s ease;
-ms-transition: all .5s ease;
-webkit-transition: all .5s ease;
}
.destination h3 {
font-size: 25px;
color: #fff;
line-height: 20px;
text-transform: uppercase;
margin-bottom: 10px;
}
.destination span {
display: block;
font-size: 15px;
color: #fff;
line-height: 16px;
}
.overlay-leftTop {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.destinationmask {
width: 100%;
height: 100%;
z-index: 5;
opacity: 0.4;
filter: alpha(opacity=50);
background: #000;
}
<img src="https://image.ibb.co/evyyfm/mu.jpg" alt="img01"/>
<a href="" class="overlay-leftTop">
<div class="table-display">
<div class="table-cell table-cell-bottom">
<div class="destination">
<h3>TEST</h3>
<span>Check,check1,check2</span>
</div>
</div>
</div>
Actually I need something like this
You should use background-image CSS property instead of <img> tag. And for effects use pseudo elements like :before.
Have a look at the snippet below:
.destination {
padding: 20px;
-ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
transition: all .5s ease;
-ms-transition: all .5s ease;
-webkit-transition: all .5s ease;
}
.destination h3 {
font-size: 25px;
color: #fff;
line-height: 20px;
text-transform: uppercase;
margin-bottom: 10px;
}
.destination span {
display: block;
font-size: 15px;
color: #fff;
line-height: 16px;
}
.overlay-leftTop {
display: block;
position: relative;
text-decoration: none;
width: 300px;
height: 300px;
z-index: 9;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.overlay-leftTop:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
background: rgba(0,0,0,0.3);
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.overlay-leftTop:hover {
text-decoration: none;
}
.overlay-leftTop:hover:before {
background: rgba(0,0,0,0.5);
}
.destinationmask {
width: 100%;
height: 100%;
z-index: 5;
opacity: 0.4;
filter: alpha(opacity=50);
background: #000;
}
<a href="" class="overlay-leftTop" style="background-image: url('https://image.ibb.co/evyyfm/mu.jpg');">
<div class="table-display">
<div class="table-cell table-cell-bottom">
<div class="destination">
<h3>TEST</h3>
<span>Check,check1,check2</span>
</div>
</div>
</div>
</a>
Hope this helps!
I think this is what u want.
.destination {
padding: 20px;
-ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
transition: all .5s ease;
-ms-transition: all .5s ease;
-webkit-transition: all .5s ease;
}
.destination h3 {
font-size: 25px;
color: #fff;
line-height: 20px;
text-transform: uppercase;
margin-bottom: 10px;
}
.destination span {
display: block;
font-size: 15px;
color: #fff;
line-height: 16px;
}
.overlay-leftTop {
display: block;
position: relative;
text-decoration: none;
width: 300px;
height: 300px;
z-index: 9;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.overlay-leftTop:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
background: rgba(0,0,0,0.3);
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.overlay-leftTop:hover {
text-decoration: none;
}
.overlay-leftTop:hover:before {
background: rgba(0,0,0,0.5);
}
.destinationmask {
width: 100%;
height: 100%;
z-index: 5;
opacity: 0.4;
filter: alpha(opacity=50);
background: #000;
}
.view-btn{
position: absolute;
top: 180px;
font-size: 16px !important;
border: 2px solid #fff;
display: inline-block !important;
text-align: center;
padding: 10px 15px;
opacity: 0;
transition:all 350ms ease 0s;
}
.overlay-leftTop:hover .view-btn{
opacity:1;
}
<a href="" class="overlay-leftTop" style="background-image: url('https://image.ibb.co/evyyfm/mu.jpg');">
<div class="table-display">
<div class="table-cell table-cell-bottom">
<div class="destination">
<h3>TEST</h3>
<span>Check,check1,check2</span>
<span class="view-btn">View More</Span>
</div>
</div>
</div>
</a>
Please try this. I have added some css:
.img-wrap {
display: inline-block;
position: relative;
width: 386px;
}
.img-box:before {
position: absolute;
content: "";
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
transform:scale(0);
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
}
.img-wrap:hover .img-box:before {
transform:scale(1);
}
.img-wrap:hover .overlay-leftTop{
opacity:1;
}
img {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
display: block;
}
.destination {
padding: 20px;
-ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
transition: all .5s ease;
-ms-transition: all .5s ease;
-webkit-transition: all .5s ease;
}
.destination h3 {
font-size: 25px;
color: #fff;
line-height: 20px;
text-transform: uppercase;
margin-bottom: 10px;
}
.destination span {
display: block;
font-size: 15px;
color: #fff;
line-height: 16px;
}
.overlay-leftTop {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity:0;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
}
.img-wrap {
display: inline-block;
position: relative;
width: 386px;
}
.img-box:before {
position: absolute;
content: "";
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
transform:scale(0);
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
}
.img-wrap:hover .img-box:before {
transform:scale(1);
}
.img-wrap:hover .overlay-leftTop{
opacity:1;
}
img {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
display: block;
}
<div class="img-wrap">
<div class="img-box">
<img src="https://image.ibb.co/evyyfm/mu.jpg" alt="img01"/>
</div>
<a href="" class="overlay-leftTop">
<div class="table-display">
<div class="table-cell table-cell-bottom">
<div class="destination">
<h3>TEST</h3>
<span>Check,check1,check2</span>
</div>
</div>
</div>
</a>
</div>
Related
This issue is a little bit complicated. I am trying to position some images in the order you can in this fiddle, but I had to add a parent div for the images so they could work properly with an animated box that displays the names of the people the images represent. The issue lies with the div not lining up the way the images do as just being lone img tags. Any help with this would be extremely appreciated.
body {
background: #7d7d7d;
}
h2 {
font-family: Pacifico;
font-size: 10px;
font-style: normal;
font-variant: normal;
font-weight: 200;
color: white;
line-height: 0px;
}
#friends {
position: absolute;
width: 200px;
height: 20px;
top: 50px;
right: 200px;
padding-top: 4px;
border: 1px solid white;
z-index: -10;
background-color: #000;
font-family: arial;
text-align: center;
overflow: hidden;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#friends:hover {
height: 240px;
border-radius: 10px;
}
.peeps {
position: relative;
margin-top: 5px;
margin-right: 5px;
width: 50px;
height: 50px;
}
.sam, .ys, .kani, .ash, .adam, .lit, .tsun, .lara, .bath {
width: 50px;
height: 50px;
border: 1px solid black;
border-radius: 100%;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
.sam:hover {
border-radius: 0;
box-shadow: 0px 0 15px #a2dfe0;
}
#name {
position: absolute;
margin-top: -20px;
height: 20px;
width: 0px;
opacity: 0;
vertical-align: middle;
line-height: 15px;
background-color: #000;
border: 1px solid white;
overflow: hidden;
z-index: -1;
left: 50%;
transform: translate(-50%, 0);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
.peeps:hover #name {
margin-top: -85px;
height: 20px;
width: 50px;
opacity: 1;
background-color: #000;
color: #000;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
<html>
<div id="friends">
<br><br><!-- jsfiddle doesn't like my text -->
<div class="peeps">
<img class="sam" src="http://usd.chatango.com/profileimg/s/a/samantha/thumb.jpg" />
<p id="name" style="text-align: center;">
<font color="white" size="1">Ugh</font>
</p>
</div>
<div class="peeps">
<img class="ys" src="http://usd.chatango.com/profileimg/y/s/ys/thumb.jpg">
<p id="name" style="text-align: center;">
<font color="white" size="1">Ugh</font>
</p>
</div>
<div class="peeps">
<img class="kani" src="http://usd.chatango.com/profileimg/k/a/kaninkiller/thumb.jpg">
<p id="name" style="text-align: center;">
<font color="white" size="1">Ugh</font>
</p>
</div>
</div>
</html>
If I understand your question correctly just set the .peeps class to display:inline-block;. Here is a snippet.
body {
background: #7d7d7d;
}
h2 {
font-family: Pacifico;
font-size: 10px;
font-style: normal;
font-variant: normal;
font-weight: 200;
color: white;
line-height: 0px;
}
#friends {
position: absolute;
width: 200px;
height: 20px;
top: 50px;
right: 200px;
padding-top: 4px;
border: 1px solid white;
z-index: -10;
background-color: #000;
font-family: arial;
text-align: center;
overflow: hidden;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#friends:hover {
height: 240px;
border-radius: 10px;
}
.peeps {
position: relative;
margin-top: 5px;
margin-right: 5px;
width: 50px;
height: 50px;
display:inline-block;
}
.sam, .ys, .kani, .ash, .adam, .lit, .tsun, .lara, .bath {
width: 50px;
height: 50px;
border: 1px solid black;
border-radius: 100%;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
.sam:hover {
border-radius: 0;
box-shadow: 0px 0 15px #a2dfe0;
}
#name {
position: absolute;
margin-top: -20px;
height: 20px;
width: 0px;
opacity: 0;
vertical-align: middle;
line-height: 15px;
background-color: #000;
border: 1px solid white;
overflow: hidden;
z-index: -1;
left: 50%;
transform: translate(-50%, 0);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
.peeps:hover #name {
margin-top: -85px;
height: 20px;
width: 50px;
opacity: 1;
background-color: #000;
color: #000;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
<div id="friends">
<br><br> <!-- jsfiddle doesn't like my text -->
<img class="sam" src="http://usd.chatango.com/profileimg/s/a/samantha/thumb.jpg">
<img class="ys" src="http://usd.chatango.com/profileimg/y/s/ys/thumb.jpg">
<img class="kani" src="http://usd.chatango.com/profileimg/k/a/kaninkiller/thumb.jpg">
<img class="ash" src="http://usd.chatango.com/profileimg/m/u/multiplelovearrows/thumb.jpg">
<img class="adam" src="http://usd.chatango.com/profileimg/t/i/tiefier/thumb.jpg">
<img class="lit" src="http://usd.chatango.com/profileimg/l/i/littered/thumb.jpg">
<img class="tsun" src="http://usd.chatango.com/profileimg/n/i/nicholle/thumb.jpg">
<img class="lara" src="http://usd.chatango.com/profileimg/h/o/hopefulhero/thumb.jpg">
<img class="bath" src="http://usd.chatango.com/profileimg/m/a/maytimes/thumb.jpg">
</div>
Okay, so I want my container to open up from the center to the specified width when on hover of the parent.
The problem is that I can't get it to not open up from the left. I want it to work similarly to this situation here.
If possible, I'd like the animation for the corners of the container to activate after it has done it's first animation.
body {
background: #4e4e4e;
}
#music {
position: absolute;
top: 5px;
left: calc(50% - 50px);
width: 50px;
height: 50px;
border: 1px solid white;
background-color: #000;
opacity: 1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease;
}
#music:hover {
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
#music img {
height: 30px;
width: 30px;
margin-top: 10px;
}
#music:hover .music-container {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
height: 23px;
width: 210px;
margin-top: 8px;
opacity: 1;
background-color: #000;
color: #000;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease;
}
.music-container {
height: 23px;
width: 0px;
position: absolute;
background-color: #000;
padding-left: 10px;
border: 1px solid white;
margin-left: -85px;
margin-top: 8px;
overflow: hidden;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
<div id="music">
<center>
<img src="https://i.imgur.com/cgIfJId.gif" />
</center>
<div class="music-container">
<center>
<font color="white" size="1">
jsfiddle can't load my music lol
</font>
</center>
</div>
</div>
You need to use transform property over-here to increase width from center for .music-container,
body {
background: #4e4e4e;
}
#music {
position: absolute;
top: 5px;
left: calc(50% - 50px);
width: 50px;
height: 50px;
border: 1px solid white;
background-color: #000;
opacity: 1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease;
}
#music:hover {
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
#music img {
height: 30px;
width: 30px;
margin-top: 10px;
}
#music:hover .music-container {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
height: 23px;
width: 210px;
margin-top: 8px;
opacity: 1;
background-color: #000;
color: #000;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease;
}
.music-container {
height: 23px;
width: 0px;
position: absolute;
background-color: #000;
padding-left: 10px;
border: 1px solid white;
margin-top: 8px;
overflow: hidden;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
left: 50%; /*Add this*/
transform: translate(-50%, 0); /*Add this*/
}
<div id="music">
<center>
<img src="https://i.imgur.com/cgIfJId.gif" />
</center>
<div class="music-container">
<center>
<font color="white" size="1">
jsfiddle can't load my music lol
</font>
</center>
</div>
</div>
You can achieve that transitioning transform: scale instead of width.
body {
background: #4e4e4e;
}
#music {
position: absolute;
top: 5px;
left: calc(50% - 50px);
width: 50px;
height: 50px;
border: 1px solid white;
background-color: #000;
opacity: 1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease;
}
#music:hover {
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
#music img {
height: 30px;
width: 30px;
margin-top: 10px;
}
#music:hover .music-container {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
height: 23px;
width: 210px;
margin-top: 8px;
opacity: 1;
background-color: #000;
color: #000;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease;
transform: scale(1);
}
.music-container {
height: 23px;
width: 210px;
transform: scale(0);
position: absolute;
background-color: #000;
padding-left: 10px;
border: 1px solid white;
margin-left: -85px;
margin-top: 8px;
overflow: hidden;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
<div id="music">
<center>
<img src="https://i.imgur.com/cgIfJId.gif" />
</center>
<div class="music-container">
<center>
<font color="white" size="1">
jsfiddle can't load my music lol
</font>
</center>
</div>
</div>
Use this css instead of left: calc(50% - 50px); I add this css in #music id for center. and also add and change in css for hover please check this.
#music {
left:0;
right:0;
margin: 0 auto;
}
#music:hover .music-container {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.music-container {
height: 23px;
width: 210px;
position: absolute;
background-color: #000;
padding-left: 10px;
border: 1px solid white;
margin-left: -85px;
margin-top: 8px;
overflow: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
left:0;
right:0;
border-radius: 10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
body {
background: #4e4e4e;
}
#music {
position: absolute;
top: 5px;
left:0;
right:0;
margin: 0 auto;
width: 50px;
height: 50px;
border: 1px solid white;
background-color: #000;
opacity: 1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease;
}
#music:hover {
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
#music img {
height: 30px;
width: 30px;
margin-top: 10px;
}
#music:hover .music-container {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.music-container {
height: 23px;
width: 210px;
position: absolute;
background-color: #000;
padding-left: 10px;
border: 1px solid white;
margin-left: -85px;
margin-top: 8px;
overflow: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
left:0;
right:0;
border-radius: 10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
<div id="music">
<center>
<img src="https://i.imgur.com/cgIfJId.gif" />
</center>
<div class="music-container">
<center>
<font color="white" size="1">
jsfiddle can't load my music lol
</font>
</center>
</div>
</div>
Check out the following snippet, the middle box .strip is an inline-block so it 'grows' from center...
.holder{
width : 500px;
margin : 0px auto;
text-align : center;
font-family : arial;
}
.button{
display : inline-block;
padding : 3px;
background : #333;
color : #fff;
border-radius : 3px;
cursor : pointer;
}
.hover:hover .strip{
width : 100px;
}
.padd{ padding:3px; }
.strip{
box-sizing : border-box;
border-radius : 3px;
margin-top : 5px;
width : 0px;
display : inline-block;
overflow : hidden;
white-space : nowrap;
transition : all 0.3s ease-out;
background : #333;
color : #fff;
}
<div class="holder">
<div class="hover">
<div class="button">Hover Me</div>
<div class="container">
<div class="strip">
<div class="padd">Some Text</div>
</div>
</div>
</div>
</div>
I'm using a hover box in my application which shows a content on hover. However , I am not able to get the text in the middle when the box is NOT hovered.
This is my html:
<div class="container">
<div class="col-xs-3" style="padding-top: 20px;">
<div class="box box-type-double">
<div class="box-hover" href="#">
<div class="box-info">
<div class="date">
<p>Design Mixes</p>
</div>
<div class="line"></div>
<div class="headline">Mix Designs Grade of all concrete’s, DLC, PQC, BM, and DBM, BC.</div>
<div class="line"></div>
</div>
<div class="mask"></div>
</div>
<div class="box-content">Design Mixes</div>
</div>
</div>
</div>
This is my Css:
.box {
text-align: center;
/*float: left;*/
/*margin: 5px;*/
position: relative;
}
.box,
.box-hover,
.box-hover .mask,
.box-img,
.box-info {
background-color: #b4a28f;
}
.box-hover,
.box-hover .mask,
.box-img {
position: absolute;
top: 0;
left: 0;
}
.box-type-double .box-hover {
z-index: 5;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
cursor: pointer;
display: block;
text-decoration: none;
text-align: center;
}
.box-type-double .box-info {
z-index: 10;
color: #ffffff;
display: table-cell;
vertical-align: middle;
position: relative;
z-index: 5;
height: 200px;
}
.box-type-double .box-info .headline {
font-size: 15px;
width: 90%;
margin: 0 auto;
}
.box-type-double .box-info .line {
height: 2px;
width: 0%;
margin: 15px auto;
background-color: #ffffff;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box-type-double .box-info .date {
font-size: 10px;
}
.box-type-double .box-hover .mask {
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
z-index: 0;
}
.box-type-double .box-hover:hover .line {
width: 90%;
}
.box-type-double .box-hover:hover {
opacity: 1;
}
.box-content {
font-size: 15px;
background-color: #3178b9;
color: white;
z-index: 0;
height: 200px;
}
Plunker link : https://plnkr.co/edit/2TiWlPG7cVIQ56zR5UGX
Put it in a span and apply flex to box-content
.box {
text-align: center;
/*float: left;*/
/*margin: 5px;*/
position: relative;
}
.box,
.box-hover,
.box-hover .mask,
.box-img,
.box-info {
background-color: #b4a28f;
}
.box-hover,
.box-hover .mask,
.box-img {
position: absolute;
top: 0;
left: 0;
}
.box-type-double .box-hover {
z-index: 5;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
cursor: pointer;
display: block;
text-decoration: none;
text-align: center;
}
.box-type-double .box-info {
z-index: 10;
color: #ffffff;
display: table-cell;
vertical-align: middle;
position: relative;
z-index: 5;
height: 200px;
}
.box-type-double .box-info .headline {
font-size: 15px;
width: 90%;
margin: 0 auto;
}
.box-type-double .box-info .line {
height: 2px;
width: 0%;
margin: 15px auto;
background-color: #ffffff;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box-type-double .box-info .date {
font-size: 10px;
}
.box-type-double .box-hover .mask {
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
z-index: 0;
}
.box-type-double .box-hover:hover .line {
width: 90%;
}
.box-type-double .box-hover:hover {
opacity: 1;
}
.box-content {
font-size: 15px;
background-color: #3178b9;
color: white;
z-index: 0;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
<div class="container">
<div class="col-xs-3" style="padding-top: 20px;">
<div class="box box-type-double">
<div class="box-hover" href="#">
<div class="box-info">
<div class="date">
<p>Design Mixes</p>
</div>
<div class="line"></div>
<div class="headline">Mix Designs Grade of all concrete’s, DLC, PQC, BM, and DBM, BC.</div>
<div class="line"></div>
</div>
<div class="mask"></div>
</div>
<div class="box-content"><span>Design Mixes<span></div>
</div>
</div>
</div>
.box-hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.box-type-double .box-info {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
Let's check it out !
I want to make a hover effect, when hover the image like this:
On the Internet found many similar examples but they all either with jquery or js. I would like to know whether it is possible to do purely with css...
UPDATE: here's a code found, but it is too big :(
.view-content {
height: 330px;
}
h2.view-title {
font-size: 3rem;
font-weight: bold;
color: #7d7a7a;
text-align: center;
text-shadow: 0 0px 0px;
}
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
}
.view .view-mask, .view {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view a.view-info {
display: inline-block;
text-decoration: none;
padding:0;
text-align: center;
color: white;
font-size: 1.9rem;
font-weight: 600;
vertical-align: middle;
}
.view-effect .view-mask {
opacity: 0;
overflow:visible;
border:100px solid rgba(0,0,0,0.7);
box-sizing:border-box;
transition: all 0.3s ease-in-out;
}
.view-effect a.view-info {
position:relative;
top:-20px;
opacity: 0;
transition: opacity 0.3s 0s ease-in-out;
}
.view-effect:hover .view-mask {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.view-effect:hover a.view-info {
opacity:1;
transition-delay: 0.3s;
}
<div class="view view-effect">
<img src="http://storage7.static.itmages.ru/i/16/0708/h_1467979220_8325708_d41d8cd98f.png" height="200" width="300" alt=""> <p></p>
<div class="view-mask">
Show project
</div>
</div>
Checkout below code as what you want or just click on below link :-
https://jsfiddle.net/ananddeepsingh/99bop25r/
HTML
<div class="box"> <img src="http://placehold.it/400x300">
<div class="overbox">
<div class="title overtext"> CSS Script </div>
<div class="tagline overtext"> Animated Text Overlay On Hover </div>
</div>
</div>
CSS
.box {
cursor: pointer;
height: 300px;
position: relative;
overflow: hidden;
width: 400px;
}
.box img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box .overbox {
background-color: #304562;
position: absolute;
top: 0;
left: 0;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
width: 360px;
height: 240px;
padding: 130px 20px;
}
.box:hover .overbox {
opacity: 1;
}
.box .overtext {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(40px);
-webkit-transform: translateY(40px);
}
.box .title {
font-size: 2.5em;
text-transform: uppercase;
opacity: 0;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
.box:hover .title,
.box:focus .title {
opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px);
}
.box .tagline {
font-size: 0.8em;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.2s;
}
.box:hover .tagline,
.box:focus .tagline {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
Yes you can do that using pure CSS. for that purpose you may use :after pseudo class as,
.img-wrapper {
position:relative;
display:inline-block;
overflow:hidden;
cursor:pointer
}
.img-wrapper .hover-div{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
opacity:0;
display:inline-block;
text-align:center;
background:rgba(0,0,0,0.3);
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-o-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
.img-wrapper:hover .hover-div{
top:0;
opacity:1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.img-wrapper:hover img {
-webkit-filter:grayscale(1);
-moz-filter:grayscale(1);
filter:grayscale(1);
}
.mybutton{
background:#FFFFFF;
color:#111111;
padding:10px 20px;
border-radius:5px;
display:inline-block;
margin-top:100px;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.mybutton:hover{
background:#111111;
color:#FFFFFF;
}
<div class="img-wrapper">
<img src="https://unsplash.it/200" >
<div class="hover-div">
<a class="mybutton">My Button</a>
</div>
</div>
Just use ':hover' after the element you want to show the effect on. For example, if you wanted to use it on the header you would create a new css tag called
header:hover{} and then you could put an opactiy of maybe 0.5 to make the object fade on hover. Hope this helps!
Yes it is possible only through HTML and CSS. Below there is an example code:
HTML:
<div class="imagebox">
<div class="transparent"><i class="fa fa-search" aria-hidden="true"></i>
<p>Zoom</p></div>
<img src="images/yourimage.jpg">
</div>
CSS:
.imagebox{
position: relative;
}
.imagebox:hover .transparent{
display: block;
}
.transparent{
background: rgba(0,0,0,0.5);
position: absolute;
height: 100%;
width: 100%;
display: none;
cursor: pointer;
}
.transparent i{
position: absolute;
left: 50%;
top: 30%;
color: #fff;
font-size: 20px;
}
.transparent p{
position: absolute;
left: 45%;
top: 50%;
color: #fff;
font-size: 20px;
}
I want to make a sliding menu using solely CSS. The menu will reveal a list of items and a close button inside it. I currently have an anchor tag on my homepage that is styled correctly, but it does not do anything when clicked.
HTML:
<body class="homepage body-push">
<!-- Menu -->
<nav class="menu" id="theMenu">
<div class="menu-wrap">
<h1 class="logo">Focus</h1>
<i class="icon-remove menu-close"></i>
Home
Services
Process
Portfolio
About
Contact
<i class="icon-facebook"></i>
<i class="icon-twitter"></i>
<i class="icon-dribbble"></i>
<i class="icon-envelope"></i>
</div>
<!-- Menu button -->
<div id="menuToggle"><i class="icon-reorder"></i></div>
</nav>
</body>
CSS:
.menu {
position: fixed;
right: -200px;
width: 260px;
height: 100%;
top: 0;
z-index: 10;
text-align: left;
}
.menu.menu-open {
right: 0px;
}
.menu-wrap {
position: absolute;
top: 0;
left: 60px;
background: #1a1a1a;
width: 200px;
height: 100%;
}
.menu a {
margin-left: 20px;
color: #808080;
display: block;
font-size: 12px;
font-weight: 700;
line-height: 40px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.menu a:hover {
color: #ffffff;
}
.menu a:active {
color: #ffffff;
}
.menu a > i {
float: left;
display: inline-block;
vertical-align: middle;
text-align: left;
width: 25px;
font-size: 14px;
line-height: 40px;
margin: 25px 2px;
}
.menu-close {
cursor: pointer;
display: block;
position: absolute;
font-size: 14px;
color: #808080;
width: 40px;
height: 40px;
line-height: 40px;
top: 20px;
right: 5px;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.menu-close:hover {
color: #ffffff;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
/* Push the body after clicking the menu button */
.body-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.body-push-toright {
left: 200px;
}
.body-push-toleft {
left: -200px;
}
.menu,
.body-push {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#menuToggle {
position: absolute;
top: 20px;
left: 0;
z-index: 11;
display: block;
text-align: center;
font-size: 14px;
color: #ffffff;
width: 40px;
height: 40px;
line-height: 40px;
cursor: pointer;
background: rgba(0,0,0,0.25);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#menuToggle:hover {
color: #ffffff;
background: rgba(0,0,0,0.2);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
UPDATE: I finally found a way to get it working.
HTML:
<!-- Menu -->
<nav class="menu" id="theMenu">
<div class="menu-wrap">
<h1 class="logo">Menu</h1>
<i class="icon-remove menu-close"></i>
Home
Services
Process
Portfolio
About
Contact
<i class="icon-facebook"></i>
<i class="icon-twitter"></i>
<i class="icon-dribbble"></i>
<i class="icon-envelope"></i>
</div>
<!-- Menu button -->
<div id="menuToggle"><i class="icon-reorder"></i></div>
</nav>
CSS:
.menu {
position: fixed;
right: -200px;
width: 260px;
height: 100%;
top: 0;
z-index: 10;
text-align: left;
}
.menu.menu-open {
right: 0px;
}
.menu-wrap {
position: absolute;
top: 0;
left: 60px;
background: #1a1a1a;
width: 200px;
height: 100%;
}
.menu h1.logo a {
font-family: 'Raleway', Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 800;
letter-spacing: 0.15em;
line-height: 40px;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
}
.menu h1.logo a:hover {
color: #f85c37;
}
.menu img.logo {
margin: 20px 0;
max-width: 160px;
}
.menu a {
margin-left: 20px;
color: #808080;
display: block;
font-size: 12px;
font-weight: 700;
line-height: 40px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.menu a:hover {
color: #ffffff;
}
.menu a:active {
color: #ffffff;
}
.menu a > i {
float: left;
display: inline-block;
vertical-align: middle;
text-align: left;
width: 25px;
font-size: 14px;
line-height: 40px;
margin: 25px 2px;
}
.menu-close {
cursor: pointer;
display: block;
position: absolute;
font-size: 14px;
color: #808080;
width: 40px;
height: 40px;
line-height: 40px;
top: 20px;
right: 5px;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.menu-close:hover {
color: #ffffff;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
/* Push the body after clicking the menu button */
.body-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.body-push-toright {
left: 200px;
}
.body-push-toleft {
left: -200px;
}
.menu,
.body-push {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#menuToggle {
position: absolute;
top: 20px;
left: 0;
z-index: 11;
display: block;
text-align: center;
font-size: 14px;
color: #ffffff;
width: 40px;
height: 40px;
line-height: 40px;
cursor: pointer;
background: rgba(0,0,0,0.25);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#menuToggle:hover {
color: #ffffff;
background: rgba(0,0,0,0.2);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
Javascript:
// Menu settings
$('#menuToggle, .menu-close').on('click', function(){
$('#menuToggle').toggleClass('active');
$('body').toggleClass('body-push-toleft');
$('#theMenu').toggleClass('menu-open');
});
// Scrollable menu on small devices
$(window).bind("load resize", function(){
if($(window).height() < 400){
$(".menu").css("overflow-y","scroll");
}
else {
$(".menu").css("overflow-y","hidden");
}
});
I would recommend reading this: http://www.sitepoint.com/css3-sliding-menu/
If the article is TL;DR then use
/* Revealing 3D Menu CSS */
body
{
font-family: sans-serif;
font-size: 100%;
padding: 0;
margin: 0;
color: #333;
background-color: #221;
}
/* main page */
article
{
position: fixed;
width: 70%;
left: 0;
top: 0;
right: 0;
bottom: 0;
padding: 30px 15%;
background-color: #fff;
overflow: auto;
z-index: 0;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
}
article:after
{
position: absolute;
content: ' ';
left: 100%;
top: 0;
right: 0;
bottom: 0;
background-image: -webkit-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: -moz-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: -ms-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: -o-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
pointer-events: none;
}
/* navigation */
nav
{
position: fixed;
left: -16em;
top: 0;
bottom: 0;
background-color: #654;
border-right: 50px solid #765;
box-shadow: 4px 0 5px rgba(0,0,0,0.2);
z-index: 1;
cursor: pointer;
}
nav:after
{
position: absolute;
content: ' ';
width: 0;
height: 0;
right: -70px;
top: 50%;
border-width: 15px 10px;
border-style: solid;
border-color: transparent transparent transparent #765;
}
nav ul
{
width: 14em;
list-style-type: none;
margin: 0;
padding: 1em;
}
nav a:link, nav a:visited
{
display: block;
width: 100%;
font-weight: bold;
line-height: 2.5em;
text-indent: 10px;
text-decoration: none;
color: #ffc;
border-radius: 4px;
outline: 0 none;
}
nav a:hover, nav a:focus
{
color: #fff;
background-color: #543;
text-shadow: 0 0 4px #fff;
box-shadow: inset 0 2px 2px rgba(0,0,0,0.2);
}
/* hovering */
article, article:after, nav, nav *
{
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-ms-transition: all 600ms ease;
-o-transition: all 600ms ease;
transition: all 600ms ease;
}
nav:hover
{
left: 0;
}
nav:hover ~ article
{
-webkit-transform: translateX(16em) perspective(600px) rotateY(10deg);
-moz-transform: translateX(16em) perspective(600px) rotateY(10deg);
-ms-transform: translateX(16em) perspective(600px) rotateY(10deg);
-o-transform: translateX(16em) perspective(600px) rotateY(10deg);
transform: translateX(16em) perspective(600px) rotateY(10deg);
}
nav:hover ~ article:after
{
left: 60%;
}
This can be used to create a 3d sliding menu as seen here