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;
Related
Per the title, you can see a demo of the issue here.
Here is the HTML code:
<div id="outer">
<div id="inner">
</div>
</div>
Here is the CSS code:
#inner{
height: 100%;
width: 100%;
border-radius: 20px;
text-shadow: 5px 5px 5px #000000;
background-color: white;
opacity: 0;
-webkit-transition: opacity .5s linear;
-moz-transition: opacity .5s linear;
transition: opacity .5s linear;
}
#inner:hover{
opacity: 1;
}
#outer{
border: 6px solid #dcc5c5;
border-radius: 20px;
text-shadow: 5px 5px 5px #000000;
position: relative;
display: inline-block;
transition: all 0.5s ease-in-out;
background-color: red;
height: 200px;
width: 200px;
}
I've tried various suggestions here and here with no solution.
you are using margin-top:20px;
in this element
#inner {
height: 100px;
background-color: #42749F;
width: 200px;
/* -1px here for to compansate for the outer border of the container */
-moz-border-radius: 0 0 9px 9px;
}
remove margin and it will fill inside parent element
Working fiddle
The problem in that is that the child takes priority, if the parent div says:
text-font: Sans-Serif
but the child says:
text-font: Arial
the elements in the child sector take priority. In other words, the parent is the "Default". The same happens to "rounded corners" and "margin-top". The "margin-top" takes priority.
Just make sure that those two are correct.
I guess the border you've set on the inside division is creating problems here. Removing the border makes the child element fully fill the parent.
Is this what you were looking for? You may elaborate more if you want, in comments.
.box {
position: relative;
overflow: hidden;
border-radius: 20px;
transition: all 0.5s ease-in-out;
background-color: red;
height: 200px;
width: 200px;
}
.scratcher{
height: 100%;
width: 100%;
background-color: white;
opacity: 0;
transition: opacity .5s linear;
}
.scratcher:hover{
opacity: 1;
}
<div class="box">
<div class="scratcher">Scratcher</div>
</div>
I noticed that if you offset the difference (6px) in border-width of the containing element (.box_1 / #outer), with the border-radius of the nested element (#scratcher / #inner), you will fill up the corner gaps.
Deduct 6px from the border-radius value of the nested element (#scratcher / #inner).
#inner {
height: 100%;
width: 100%;
border-radius: 13px;
text-shadow: 5px 5px 5px #000000;
background-color: white;
opacity: 0;
-webkit-transition: opacity .5s linear;
-moz-transition: opacity .5s linear;
transition: opacity .5s linear;
}
#inner:hover {
opacity: 1;
}
#outer {
border: 6px solid #dcc5c5;
border-radius: 20px;
text-shadow: 5px 5px 5px #000000;
position: relative;
display: inline-block;
transition: all 0.5s ease-in-out;
background-color: red;
height: 200px;
width: 200px;
}
<div id="outer">
<div id="inner">
</div>
</div>
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;
}
I'm trying to make a simple square rotate slightly to the left when the user hovers over the element. I am rotating the element about the Y axis. When I hover over the element it looks like the left half of the element is correctly raising the hover. When you attempt to hover the right side is quirky. I know it's definitely related to something within my transform. Hoping someone with more experience will be able to spot it.
Update:
I found a similar question here, but don't know what they mean in the answer. If I remove the height/width from the container element it works. But why?
:hover works only on lower part of rotateX transformed div
HTML:
<div class='container'>
<div class='tile'>
Tile
</div>
</div>
CSS:
.tile
{
border: 1px solid black;
width: 100px;
height: 100px;
box-shadow: 2px 2px 5px #888888;
border-radius: 12px;
-moz-transition: all .5s linear;
-o-transition: all .5s linear;
-webkit-transition: all .5s linear;
transition: all .5s linear;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute;
}
.tile:hover
{
-webkit-transform: rotateY(25deg);
transform: rotateY(25deg);
box-shadow: 10px 10px 5px #888888;
}
.container
{
position: relative;
margin: 10px auto;
width: 450px;
height: 281px;
}
http://codepen.io/cgatian/pen/lDejJ?editors=110
Change the hover from the .title to the .container. As the .title moves, the hover area change shape/location and causes the hover out.
http://jsbin.com/ripicesu/1/edit
CSS
.tile
{
border: 1px solid black;
width: 100px;
height: 100px;
box-shadow: 2px 2px 5px #888888;
border-radius: 12px;
-moz-transition: all .5s linear;
-o-transition: all .5s linear;
-webkit-transition: all .5s linear;
transition: all .5s linear;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute;
}
li:hover .tile
{
-webkit-transform: rotateY(25deg);
transform: rotateY(25deg);
box-shadow: 10px 10px 5px #888888;
}
.container
{
position: relative;
margin: 10px auto;
width: 100px;
height: 100px;
}
li {
list-style-type: none;
display: block;
width: 100px;
height: 100px;
}
HTML
<div class='container'>
<ul>
<li><div class='tile'>Tile</div></li>
<li><div class='tile'>Tile</div></li>
<li><div class='tile'>Tile</div></li>
<li><div class='tile'>Tile</div></li>
</ul>
</div>
You can remove container, than it's working. Change .tile position to relative and float:left and you can have as many as you like.
CSS
.tile
{
position: relative;
float: left;
text-align: center;
line-height: 100px;
border: 1px solid black;
width: 100px;
height: 100px;
box-shadow: 2px 2px 5px #888888;
border-radius: 12px;
-moz-transition: all .5s linear;
-o-transition: all .5s linear;
-webkit-transition: all .5s linear;
transition: all .5s linear;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
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
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/