At my blog -> http://studiodeideias.blog.br/
There is a "image caption" that I want to remove. Every time you pass the mouse on it, it gets darker (hoover effect).
Can anyone help? Thanks.
Assuming that what you want to remove is the hover effect, you should remove this lines of code from your style.css file
#feature-slider .entry-container:hover {
background: #444;
background: rgba(0,0,0,0.6);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
Once you do that, you're golden.
Related
I have a form that changes border color(red-green) if the inputted values are correct or not - I also change between two small icons (glyphicon-ok and glyphicon-remove) at the end of each field.
I wanted to add a transition effect on the border color and icons(ease-in-out).
On the border color works perfectly but I noticed on the icons even though I set 'ease-in-out' the very first transition it's still 'linear' - the icons come in from the bottom like something pushes them up - I want them just to simply appear with a 0.2s transition.
Here is my css for the icons:
.start-label .glyphicon-ok {
position: absolute;
font-size: 25px;
top: 19px;
right: 10px;
color: #ACCB71;
transition: 0.2s ease-in-out;
}
.start-label .glyphicon-remove {
position: absolute;
font-size: 25px;
top: 19px;
right: 10px;
color: #CC3E44;
transition: 0.2s ease-in-out;
}
I have only these transitions in my entire css code with the border ones.
The transition for the border is the following:
transition: border 0.2s ease-in-out;
What am I doing wrong here? Or this is how it supposed to work?
Thanks to Dorvalla's help I resolved it by specifying the transition on the color.
From:
transition: 0.2s ease-in-out;
To:
transition: color 0.2s ease-in-out;
I've a h1 text that is very faded on a background. Once you roll over it / hover over the block that it is in, it slowly start to light up until it is completely white. This is great and just like I want it to be. Here's the problem. Once you leave the hover, the color goes back to being faded. I'd like for it to stay white as the whole point of having it faded is that it should not be in your sight until you are hovering past it.
TL:DR / When I hover a h1 it starts to light up, I want the new color to remain after you remove the hover.
The HTML I use
<h1 style="color: #fff;">Sammen flytter vi<br> de digitale grænser.</h1>
The CSS I use
.lovernemarketingtitle h1 {
font-size: 50px;
line-height: 54px;
font-weight: 900;
opacity: 0.5;
}
.lovernemarketingtitle:hover h1 {
opacity: 1;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}
SOLUTION BY PRAVEEN KUMAR
http://jsbin.com/dufarofoto/1/edit?html,css,output
Use transition-delay, but beware, improper use affects the hovered state as well.
a {text-decoration: none; display: inline-block; padding: 5px; border: 1px solid #ccc; border-radius: 3px; line-height: 1; color: #000; transition: all 0.5s linear 2s;}
a:hover {transition: all 0.5s linear 0s; background: #ccf;}
Hover Me<br />
Lights up immediately but goes back after 2 seconds.
ps: There's no opacity: 2.
Check out the Shopify login page and note the checkbox (it's green). I've been inspecting away but can't figure out how they're doing this. I did figure out the real checkbox is hidden behind this one (via float: left). But this thing is not an image. No idea how they pulled that off. Any CSS geniuses care to take a look?
As i understand it , they reduce the width and height of the real checkbox and used label:before pseudo element instead:
here is the code they used to create their custom checkbox :
.marketing-checkbox-label:before, .marketing-radio-label:before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 20px;
width: 20px;
background-color: white;
border-radius: 4px;
border: 1px solid #e5e5e5;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
-webkit-transition: border-color 150ms ease;
-moz-transition: border-color 150ms ease;
transition: border-color 150ms ease;
}
I guess I should start this off by saying that I'm working on a tumblr theme. This is what the link code looks like:
a {
color: {color:Text};
text-decoration: none;
padding: 3px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
background: #C1FFC1;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
}
Now this code works perfectly fine; however, images that are links -- and just about every photo post IS a link -- show up with a green background, which is fine for text, but ugly for a picture.
I tried to use the following code to get rid of this:
a img {
border-width: 0px;
background: none;
}
This didn't work, however, and the background was still there.
If any of you want to check my theme out, here is a link to the blog: http://queenquagsire.tumblr.com (Just thought I should say, since this is not a professional website, and I'm only using it for testing purposes some -- well, all -- of the posts are pretty childish.)
The green background is kinda hard to see, but it's behind the center of image post, and sticks out. Also, when you hover over it, it disappears.
I feel like this is very simple, but I still can't seem to fix it; I've visited other websites and tried their solutions, but had no luck.
Also, I did try to change the link code to this
p a {
color: {color:Text};
text-decoration: none;
padding: 3px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
background: #C1FFC1;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
}
so it only affected paragraphs, but that messed some other things up.
Can anyone help? Am I going to have to edit the link code itself?
CSS cannot look at an element’s children when deciding how to style that element. You’ll have to change the HTML part of your template to add a special class to image posts (say, image-post), and then style all a elements within one specially:
.image-post a {
background: none;
}
Historical note: An old draft of CSS3 from 2001 did specify a pseudo-class that could be used to select on an element’s content. However, all subsequent drafts have blanked that section out.
I use CSS transitions fairly regularly and for some reason I cannot get them to work on a simple unordered list. I created a demo here: http://jsfiddle.net/79NhC/
On the list item, I have the following css:
#servicesBox li {
border-bottom:1px solid #eeeeee;
padding:10px 0 10px 10px;
webkit-transition: background 0.2s;
moz-transition: background 0.2s;
ms-transition: background 0.2s;
o-transition: background 0.2s;
transition: background 0.2s;
}
For some reason, when a user hovers over the list item, the background does not gracefully fade in. Any reason why? Thanks in advance
You need to put a - before all of your browser-specific transition declarations.
So, like this:
#servicesBox li
{
border-bottom:1px solid #eeeeee;
padding:10px 0 10px 10px;
-webkit-transition: background 0.2s;
-moz-transition: background 0.2s;
-ms-transition: background 0.2s;
-o-transition: background 0.2s;
transition: background 0.2s;
}