I am trying to have a hover effect on a div so that the div containing the image moves up on hover. I want the "polaroid" div to move up on hover. This effect works if i just apply the hover class to the img but not the whole div. Please help. Fiddle here
Markup:
<div id="home-gal-col"> <span class="span-homegal">
<a href="/listings/category/accessories/">
<div class="polaroid">
<img src="/images/homegal/picture.jpg">
<p>picture</p>
</img>
</div>
</a>
</span>
</div>
Css:
#home-gal-col {
width:15%;
float:left;
padding:5px;
}
.polaroid {
border: 10px solid #fff;
border-bottom: 15px solid #fff;
-webkit-box-shadow: 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px #777;
box-shadow: 3px 3px 3px #777;
}
.polaroid img {
margin: 0 auto;
width: 100%;
}
.polaroid p {
text-align: center;
color: #D51386;
}
.span-homegal a {
-webkit-transition: margin 0.2s ease-out;
-moz-transition: margin 0.2s ease-out;
-o-transition: margin 0.2s ease-out;
}
.span-homegal a:hover {
margin-bottom: 5px;
}
Is this what you are looking for?
.polaroid:hover{
margin-top: -10px;
}
You can also add the CSS 3 animation adding the transition properties on the .polaoid class:
.polaroid {
border: 10px solid #fff;
border-bottom: 15px solid #fff;
-webkit-box-shadow: 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px #777;
box-shadow: 3px 3px 3px #777;
-webkit-transition: margin 0.2s ease-out;
-moz-transition: margin 0.2s ease-out;
-o-transition: margin 0.2s ease-out;
transition: margin 0.2s ease-out;
}
Living example: http://jsfiddle.net/txgvh/2/
Related
I've a WhatsApp share button but I'm facing some issue with it. sharing function works well but the problem is that when the page loads(or while leaving the page), the background color of the button is displayed on the entire page for a short period of time which looks ugly. Can somebody help me to fix it? What should I change in this code so that the original theme color will be displayed while page loading instead of this WhatsApp button's color? Thanks in advance.
<style>
body{background-color:#49C34F}
.mct_whatsapp_btn {
background: #11A518;
color: white;
font-size: 16px;
padding: 6px 9px 6px 28px;
border-radius: 2px;
position: relative;
transition: ease-in all 0.3s;
moz-transition: ease-in all 0.3s;
-o-transition:ease-in all 0.3s;
-webkit-transition: ease-in all 0.3s;
text-decoration: none;
box-shadow: inset 3px 1px 1px rgba(17, 165, 24, 0.25);
border: 1px solid #028408;
}
.mct_whatsapp_btn:before {
content: '';
background: url(BACKGROUND IMAGE URL);
position:absolute;
top: 6px;
left: 7px;
width:16px;
transition: ease-in all 0.3s;
moz-transition: ease-in all 0.3s;
-o-transition:ease-in all 0.3s;
-webkit-transition: ease-in all 0.3s;
height:16px;
}
.mct_whatsapp_btn:hover {
background: #028408;
text-decoration: none;
color:white;
border: 1px solid #11A518;
box-shadow: inset 3px 1px 1px rgba(2, 132, 8, 0.25);
}
.mct_whatsapp_btn:hover:before {
transform: rotate(360deg);
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 well">
<a class="mct_whatsapp_btn" data-link="" data-text="" href="whatsapp://send?text=">Share</a>
</div>
Remove the first block of code body{background-color:#49C34F}
hey guys i build here a nice hover effect on a profile card, but i would like to have the border that i have on the hover effect more inside the content. padding didnt worked for me, any clue how to fix it.
i have here a demo code of it on bootply
thats what im looking fore
.model-card {
display: inline-block;
position: relative;
margin: 0em 0.7em 1.4em 0.7em;
background-color: #fff;
transition: box-shadow .25s;
width: 15em;
padding: 0px;
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
-webkit-transition: transform 0.3s ease-out;
-moz-transition: transform 0.3s ease-out;
-o-transition: transform 0.3s ease-out;
}
span.hover-content {
background: rgba(135,211,183,0.7);
color: white;
border: 1px solid #fff;
cursor: pointer;
display: table;
padding: 10px;
height: 21em;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
Please try this css:
span.hover-content span {
border: 1px solid;
display: table-cell;
text-align: center;
vertical-align: middle;
}
Try to use box-shadow
span.hover-content span {
box-shadow: inset 1px 1px #777, 1px 1px #777;
display: table-cell;
text-align: center;
vertical-align: middle;
}
Demo
.common_button:active
{
box-shadow: 0px 3px 3px -2px #777;
padding: 3px;
width:80px;
}
.common_button_container
{
border: 1px solid;
width: 100px;
padding: 7px;
}
I am trying to create button-pressing effects. But I don't want this effect to affect it's container. i want to have only width and height reduced on button while pressing but not for the container. Any idea?
You could just hard set the height of the .common_button_container by adding height: 30px; to it.
If the size of the container is not specified, use this:
.common_button_placeholder
{
background-color: transparent;
color: transparent;
}
.common_button
{
position: absolute;
}
.common_button:active
{
box-shadow: 0px 3px 3px -2px #777;
padding: 3px;
width:80px;
}
.common_button_container
{
border: 1px solid;
width: 100px;
padding: 7px;
}
<div class="common_button_container">
<div class="common_button">Submit</div>
<div class="common_button_placeholder">Submit</div>
</div>
The common_button is set to absolute; common_button_placeholder not. So common_button_placeholder is behind the orginal, it set the size of the container, but common_button has no further effect to it.Just for the styling, how about using transition:
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
I've been trying to create an image that on hover a caption will slide out from left to right on top and from left to right on bottom. I've gotten it working on two seperate images ie: one image has the top caption and one image has the bottom caption; however I can't seem to get both working on one image. Also I'm trying to get the captions and image to scale to the container which is boggling me. Another thing I was trying is to insert two divs into the top slide caption and get them to scale to the size but I couldn't get it going.
Here's my code at the moment:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>slide caption thingy</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div class="wrapper">
<header>
<h1 class="main_head">hj</h1>
</header>
<hr />
<div class="container left">
<img src="images/1.jpg" alt="image" />
<article class="text css3-3 css3-4">
<h1>space1 </h1>
</article>
</div>
<div class="container right">
<img src="images/2.jpg" alt="image" />
<article class="text css3-4">
<h1>space2</h1>
</article>
</div>
<hr />
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
body {
}
.wrapper {
margin: 0 auto;
width: 960px;
padding: 30px;
position: relative;
}
.left {
float: left;
}
.right {
float: right;
}
hr {
border: none;
width: 100%;
height: 7px;
margin: 10px 0 10px 0;
clear: both;
}
a {
text-shadow: 1px 1px #efefef;
text-decoration: none;
}
b {
text-shadow: 1px 1px #efefef;
text-decoration: none;
}
header h1.main_head {
font: 36px/18px Georgia, Arial, sans-serif;
color: #838383;
text-shadow: 1px 1px #efefef;
text-align: center;
padding: 20px 0 20px 0;
}
.container {
border: 10px solid #fff;
position: relative;
overflow: hidden;
height: 200px;
-webkit-box-shadow: 0 0 3px #000;
-moz-box-shadow: 0 0 3px #000;
box-shadow: 0 0 3px #000;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.container:hover {
cursor: pointer;
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
}
.container2 {
border: 10px solid #fff;
position: relative;
overflow: hidden;
height: 200px;
-webkit-box-shadow: 0 0 3px #000;
-moz-box-shadow: 0 0 3px #000;
box-shadow: 0 0 3px #000;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.container2:hover {
cursor: pointer;
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
}
.text {
background: rgba(0,0,0,0.5);
color: white;
font: 14px Georgia,serif;
height: 80px;
width: inherit;
position: absolute;
}
.text a {
color: #fff;
display: block;
padding: 15px;
font-size: 16px;
font-weight: normal;
text-shadow: none;
text-decoration: none;
width: 400px;
}
/* CSS3 Right Effect */
article.css3-3 {
right: -400px;
top: 0;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
width: 400px;
}
.text a.css3-3 {
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .5s ease-out;
transition: all .4s ease-out;
}
.text a.css3-3:hover {
color: #d0206a;
text-decoration: none;
}
.container:hover article.css3-3 {
right: 0;
}
/* CSS3 Left Effect */
article.css3-4 {
left: -400px;
bottom: 0;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
width: 400px;
}
.text a.css3-4 {
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .5s ease-out;
transition: all .4s ease-out;
}
.text a.css3-4:hover {
color: #d0206a;
text-decoration: none;
}
.container:hover article.css3-4 {
left: 0;
}
Maybe I'm not understanding correctly, but is this what you're looking for?
<div class="container right">
<img src="http://placehold.it/350x150" alt="image" />
<article class="text css3-4">
<h1>space1</h1>
</article>
<article class="text css3-3 css3-4">
<h1>space2 </h1>
</article>
</div>
Shadows work properly on all elements, on IE and Firefox, but not for the button element in Chrome and Safari:
http://jsfiddle.net/q8xaa/
<button class="btn-test">
<span class="btn">test</span>
</button>
.btn-test {
background-color: transparent;
border: 0;
padding: 0px;
}
.btn-test:hover .btn {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.btn-test .btn {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
-webkit-box-shadow: 4px 4px 0px #000;
-moz-box-shadow: 4px 4px 0px #000;
box-shadow: 4px 4px 0px #000;
background-color: #f00;
margin: 0px;
padding: 10px;
height: 40px;
display: inline-block;
}
button {
margin: 0;
padding: 0;
border: 0;
overflow: visible;
}
Any ideas on how to solve?
Example http://jsfiddle.net/H23Jy/1/
I tried forcing a zero CSS3 transformation as shown below
CSS
button span {
-webkit-transform: translate3d(0,0,0);
}
and the shadow seems to work fine also on Chrome 35.
But as you can see, in that way the button is not vertically aligned with the other buttons, so you could use -webkit-transform: translateY(-3px); instead
Result