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>
Related
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>
I was trying to figure out how to center my CSS transition animation with width only; which was solved.
The music player that I am using is acting strangely with the tranform:translate property. Before I implemented the transform:translate property, the music player worked correctly.
Problem : But when I started using it I couldn't click any of the buttons unless I either spammed them or right clicked into a menu then left clicked them; which you can see here : GIF example.
You can view this issue in action at : this demo page.
This is my code (used at demo page) :
CSS code :
body {
background-color: black;
}
#music {
position: absolute;
top: 140px;
left: 155px;
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;
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%;
transform: translate(-50%, 0);
}
HTML code :
<div id="music">
<center>
<img src="https://i.imgur.com/cgIfJId.gif" />
</center>
<div class="music-container">
<center>
<font size="1" color="white">
Music Player not supported. See link in SO to view.
</font>
</center>
</div>
</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 want a Button, with 2 elements in it, to slide the Background.
But I want both elements to center vertical and get height 100% even when the other element is bigger.
Here is the HTML
<button class="btn-cstm-slide">
<div class="btn-cstm-slide-logo"><span>Test Test 14343</span></div>
<div class="btn-cstm-slide-text">
<span>Just a Testtest</span>
<br/>
<span>Let's see</span>
</div>
</button>
And here the CSS
.btn-cstm-slide {
height: 100%;
padding: 0px;
display: flex;
position: relative;
text-decoration: none;
overflow: hidden;
background: #333C42;
border: none;
box-shadow: 0px 1px 1px rgba(0,0,0,.1);
}
.btn-cstm-slide-logo {
height:100%;
min-height:100%;
margin: 0;
padding: 10px;
position: relative;
text-decoration: none;
background: #474f54;
color: #fff;
}
.btn-cstm-slide-text {
padding: 10px;
position: relative;
text-decoration: none;
background: #333C42;
color: #fff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.btn-cstm-slide-text * {
position:relative;
}
.btn-cstm-slide-text:before {
content: "";
position: absolute;
height: 100%;
width: 0;
bottom: 0;
left:0;
background-color: #474f54;
-webkit-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.btn-cstm-slide-text:hover:before {
width: 100%;
}
Demo
FIDDLE
Can you help me? :(
Is this what you had in mind?
https://jsfiddle.net/e07uc4kj/9/
.btn-cstm-slide {
height: 100%;
padding: 0px;
display: flex;
position: relative;
text-decoration: none;
overflow: hidden;
background: #333C42;
border: none;
box-shadow: 0px 1px 1px rgba(0,0,0,.1);
}
.btn-cstm-slide-logo {
padding: 10px;
min-width: 80px;
position: absolute;
top: 0px;
bottom: 0px;
text-decoration: none;
background: #474f54;
color: #fff;
vertical-align: middle;
}
.btn-cstm-slide-text {
margin-left: 100px;
padding: 10px;
position: relative;
text-decoration: none;
background: #333C42;
color: #fff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.btn-cstm-slide-text:before {
content: "";
position: absolute;
height: 100%;
width: 0;
bottom: 0;
left:0;
background-color: #474f54;
-webkit-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.btn-cstm-slide-text:hover:before {
width: 100%;
}
i have a slide in over an image as you can see here
http://jsfiddle.net/xt94eah2/4/
when you hover over the example image you get a caption. But, how do i put a link in it?
So only when you hover and you see the grey part with says with some more info that you can then click the image and it goes to a link for example w3schools.
i have the code here
<div class="image revealUpFull">
<img src="http://cssdeck.com/uploads/media/items/8/8NNM3Tc.png" width="150px" height="150px" />
<span class="title">Caption <br / ><br / > with some more info</span>
</div>
</div>
and the CSS
div.container {
margin: 50px auto;
width: 675px;
}
div.image {
position: relative;
overflow: hidden;
width: 260px;
height: 195px;
display: inline-block;
margin-right: 15px;
margin-bottom: 15px;
box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.3);
}
img {
position: absolute;
left: 0;
top: 0;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
span.title {
width: 260px;
height: 20px;
position: absolute;
background: rgba(30,30,30,0.9);
text-align: center;
padding: 5px 0 4px;
font-size: 14px;
color: white;
font-family: "Lucida Sans", "Trebuchet MS", Arial, sans-serif;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
div.image.revealUpFull span {
height: 195px;
width: 260px;
bottom: -150px;
}
div.image.revealUpFull:hover img {
top: -150px;
}
div.image.revealUpFull:hover span {
bottom: 0px;
}
This is what you can do if I got it right for your question (You would like the whole slide in area to be clickable?). So you can make both span and a with full width and height of the area.
DEMO: http://jsfiddle.net/xt94eah2/7/
div.image.revealUpFull span {
height: 141px;
width: 150px;
bottom: -120px;
display: block;
}
div.image.revealUpFull span a {
display: block;
height: 100%;
width: 100%;
color: white;
}
There are a few corrections for the markup.
The last </div> is mis-matched.
The inline <img src="" width="150px" height="150px" /> is wrong, it should be width="150" height="150" without px.