I am working here http://tinyurl.com/a74ko2o , this is an ecommerce store , powered by wordpress and my issue is in single product page , css designing in this link page , you guys can see thumbnails under the big image on hover thumbnails shows solid red border
I add this effect, but now, the problem is when it hovered , the image's moving down , and not fixed. i need it to be fixed , exact as this website http://emporium.premiumcoding.com/demo.php
css here for thumbnails
.leftcontentsp .thumbnails img {
border: 4px solid #343434;
height: 92px;
margin: 5px 4px 8px 0;
width: 92px;
}
on hover
.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover {
border: 5px solid #d00000;
}
please help to fix up this css issue , thanks in advance
The problem is because adding a 5px wide border after a 4px wide you get a 1px difference that moves the image down. We can fix this my adding and removing a padding, so the image stays in place:
.leftcontentsp .thumbnails img {
border: 4px solid #343434;
height: 92px;
margin: 5px 4px 8px 0;
width: 92px;
padding: 1px;
}
.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover {
border: 5px solid #d00000;
padding: 0;
}
Or if it's a mistake, just make the border the same wide on :hover as on the normal.
.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover {
border: 4px solid #d00000;
}
see the difference men
give same border width
.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover {
border: 4px solid #d00000;
}
as in natural state
1px disturbing
and this is for
transition on hover
.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover {
border: 4px solid #d00000;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
Related
trying to get my website to transition text-shadow on and off hover. When I use a transition without a specified property you can see font-size,color,etc transition. When specifying the text-shadow property in the transition no transition appears (currently using Chrome to test).
nav ul li a {
color: white;
transition: text-shadow 0.5s ease;
}
nav ul li a:hover {
color:grey;
text-shadow: 2px 2px 10px rgba(255,255,255,0.23);
}
Are you sure you are not being deceived by the lightness of your color? I have amended your code and made it a workable snippet, and if I change the color to something more explicit, like red and yellow, you can actually see the effect. It's pretty feint, though. It seems like adding that property to the default does indeed work.
body {
background: black;
}
h1, h2 {
color: white;
text-shadow: 2px 2px 10px red;
transition: text-shadow 1s ease;
z-index: 1;
position: relative;
}
h2 {
text-shadow: 2px 2px 10px transparent;
}
h1:hover,
h2:hover {
text-shadow: 2px 2px 10px yellow;
}
<h1>Hover on me for text shadow!</h1>
<h2>Hover on me for text shadow!</h2>
You need to add shadow and transition in both declarations
Try this css code
nav ul li a {
color: white;
transition: 0.5s ease;
text-shadow: 2px 2px 10px rgba(255,255,255,0);
}
nav ul li a:hover {
color:grey;
text-shadow: 2px 2px 10px rgba(255,255,255,0.23);
transition: 0.5s ease;
}
I've got a search box which transitions and gets bigger when clicked on, and there is a button beside it. My problem is that the input box moves softly but the button stays in place and then teleports to its position once the transition is over. How can I trigger a transition on the button once the input box is clicked?
.searchbox {
width: 150px;
height: 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 14px;
background-color: white;
background-position: 2px 2px;
background-repeat: no-repeat;
padding: 12px 20px 12px 45px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
margin-top:10px;
}
.searchbox:focus {
width: 100%;
}
.searchbt {
float: left;
width: 15px;
height: 4px;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
cursor: pointer;
border:none;
margin-top:10px;
border-radius: 4px;
position:absolute;
z-index:1;
border: 2px solid #ccc;
border-right:none;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
.searchbt:focus {
width=100%;
}
Thanks for your help in advance.
Edit: I temporarily fixed it by moving the button to the other side (The one which doesn't move)
For some reason, when I hover over the div, the border animates properly, but mousing off of it produces no transition. What am I missing?
http://codepen.io/anon/pen/XbPbvr
HTML:
<div class="test">
Test
</div>
LESS:
.test {
background: #eee;
border-bottom: none;
width: 300px;
height: 300px;
transition: border 100ms ease-out;
&:hover {
border-bottom: 5px solid black;
transition: border 100ms ease-out;
}
}
If you truly want no border, you can animate the color to transparent and the length to 0:
.test {
background: #eee;
border-bottom: 0px solid transparent;
width: 300px;
height: 300px;
transition: border 100ms ease-out;
}
.test:hover {
border-bottom: 5px solid black;
}
<div class="test">
Test
</div>
You can't animate to border-bottom: none, change that to border-bottom: RGBA(0,0,0,0) (or perhaps border-bottom: transparent if that works).
You also don't need "transition: border 100ms ease-out" in the hover scope.
Border can't be none. Try this:
.test {
background: #eee;
border-bottom: 5px solid transparent;
width: 300px;
height: 300px;
transition: border 100ms ease-out;
&:hover {
border-bottom: 5px solid black;
transition: border 100ms ease-out;
}
}
this is fast, I have a menu that I am trying to animate with the :hover event, the menu is on a navbar and what I am trying to accomplish is the same behavior as Twitter navbar, once you hover the links, a border bottom appears, in my case is a box-shadow but it doesn't matter. As you see in the example, there is an animation once the user hover the links and I want the same animation when the user leaves
See here my codepen
and here my css
.capilleira-navbar{
background: white;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
a {
color: getColor(night);
}
a:hover, a:focus {
background: getColor(snow) !important;
color: red;
box-shadow: inset 0px -4px 0px 0px red;
margin: 0px;
transition: all 0.4s ease-in-out;
}
img {
max-width:100px;
margin-top: -7px;
}
.navbar-nav {
margin-left: 30px;
}
.navbar-nav > li > a {
padding-left: 30px;
padding-right: 30px;
}
}
.one {
transition: all 0.4s ease-in-out;
}
.one:hover {
box-shadow: inset 0px -4px 0px 0px red;
transition: all 0.4s ease-in-out;
}
<div class="one">
Hover
</div>
This is because you have the transition in the 'a:hover' declaration and not the 'a' declaration. The 'a:hover' is only in effect whilst you are hovering over the element, once you move the mouse off, it doesn't apply anymore, hence why the transition doesn't have any effect then. If you move the transition to the 'a', it will work correctly as shown in this codepen
a {
color: getColor(night);
transition: all 0.4s ease-in-out;
}
a:hover, a:focus {
background: getColor(snow) !important;
color: red;
box-shadow: inset 0px -4px 0px 0px red;
margin: 0px;
}
Remove the transition in a:hover, a:focus and add this
a
{
transition: all 0.4s ease-in-out;
}
My CSS Gallery specifications are not corresponding to my HTML5. The images are not following the hover tag and they are displaying on top of everything else. It will not stay fixed however when I change the positioning to fixed it disappear all together. CSS checker states validates all fine. I can not position it where I want on the page either. Any help would be appreciated. Thanks in advance
CSS CODE
#gallery {
bottom: -20px;
padding-right: 50px;
display: inline;
top: 200px;
z-index: 99999999;
}
#gallery ul {
list-style-type: none;
padding: 20px;
text-align: center;
position: fixed;
}
#gallery li {
display: inline;
padding-right: 20px;
}
#gallery img {
padding: 5px 5px 40px 5px;
background: white;
box-shadow: 4px 4px 8px -4px #000000;
-webkit-box-shadow: 4px 4px 8px -4px #000000;
-mox-box-shadow:4px 4px 8px -4px #000000;
}
#gallery:hover {
-webkit-transform:scale(5%);
-o-transform:scale(5%);
-moz-transform:scale(5%);
-ms-transform: scale(5%);
transform: scale(5%);
transition: 0.5s ease-in-out;
-webkit-transition:0.5s ease-in-out;
-o-transition:0.5s ease-in-out;
-mox-transition:0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
}