I am trying to make the hidden span fade in when you hover over the image. I can't make it transition.
.thumb {
margin-top: 10px;
margin-right: -3px;
}
.thumb span {
display: none;
}
.thumb:hover span {
display: block;
position: absolute;
padding: 55px 0 0 0;
text-decoration: none;
text-align: center;
background-color: #ff6600;
opacity: .8;
width: 300px;
height: 95px;
font-size: 17px;
font-family: Candara;
text-shadow: 2px 2px 2px #000;
transition-property: opacity, background-color;
transition-duration: 25s ease-in;
}
Whats wrong with my css?
".thumb:hover span" it says, your span tag has to be child to ".thumb" class tag. But you cant put "span into image tag'. Rather you can use jquery or else put ".thumb' class to the parent of span, so that the parent hover will trigger the effect you want. You can also have a common parent to both image and span.
Related
I am using scss and trying to hide an icon and when I hover the button I want the icon to display. I also want to animate it so I can't use display:none as I believe you can't animate that. So I have tried to use opacity and visibility.
I have 2 problems. Firstly, The text in the button is not centered because the icon is there in an invisible state yet when you go to dev tools you can still see it there. Secondly, the icon does not appear on hover.
.btn {
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
font-size: 1.6rem;
box-shadow: 0 1rem 2rem rgba($color-black, .2);
&--primary {
background-color: $color-primary;
color: $color-white;
transition: all .2s;
&__icon {
visibility: hidden;
opacity: 0;
}
&:hover {
transform: translateY(-2px);
&__icon {
visibility: visible;
opacity: 1;
}
}
}
}
Discover More <i class="btn--primary__icon icon-basic-clockwise"></i>
I think the problem is that your icon is displayed inline with zero content. I think you might need to change the icon to display: inline-block; and give it some dimensions. You'll want to set the dimensions to 0px when the icon should not be visible.
I converted your code from SCSS to CSS and replaced the $variables with actual CSS colors to make a working snippet...
.btn {
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
font-size: 1.6rem;
box-shadow: 0 1rem 2rem rgba(0,0,0, .2);
width: 240px;
}
.btn--primary {
background-color: red;
color: white;
transition: all .2s;
}
.btn--primary__icon {
display: inline-block;
width: 0px;
height: 0px;
visibility: hidden;
opacity: 0;
}
.btn--primary:hover {
transform: translateY(-2px);
}
.btn--primary:hover .btn--primary__icon {
width: 20px;
height: 20px;
background-color: blue;
visibility: visible;
opacity: 1;
}
<a href="#" class="btn btn--primary">
Discover More
<i class="btn--primary__icon icon-basic-clockwise"></i>
</a>
On mobile devices with a width < 400px underlined links with long text breaks in two lines and just the second line will be underline.
How can i solve this problem.
CSS code:
a {
position: relative;
display: inline-block;
cursor: pointer;
color: #1a1a1a;
text-decoration: none;
}
a:after {
position: absolute;
content: "";
left: 50%;
transform: translateX(-50%);
bottom: 0;
width: calc(100% - 5px);
min-height: 2px;
height: .15em;
background: #1a1a1a;
transition: all .15s cubic-bezier(.25,.46,.45,.94);
}
a:hover:after {
width: 105%;
}
With this you have removed the text underline
text-decoration: none;
And then you replace it with a line in a a:after, this is how this is expected to work and if you want to revert it remove the text-decoration and a:after block.
It is because you converted <a> to inline block element. just remove that display: inline-block; applied to <a> and it will work.
By default <a> tags are inline elements. So there is no need of applying display: inline-block for . But in case from some where <a> tag is inheriting some other display properties, the you have to apply/overwrite display: inline to your <a> element.
Allthough I would recommend using the text-decoration property as mentioned in previous answers, you may wrap the links content in an inline element and apply some margin/padding to use the border bottom property. Then you may animate the underline in one or more lines.
div {
width: 210px;
}
a {
position: relative;
display: inline-block;
cursor: pointer;
color: #1a1a1a;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
width: 100%;
margin-bottom: 20px;
}
span {
box-sizing: content-box;
position: relative;
left: 0;
border-bottom: 3px solid #1a1a1a;
transition: all .15s cubic-bezier(.25, .46, .45, .94);
}
a:hover span {
margin: 0 -10px;
padding: 0 10px;
border-bottom-color: navy;
}
<div>
<span>Short link</span>
<span>Really long link text here that breaks into 2 lines</span>
</div>
I've played with following code to make softly and gently transtion effect when onclick. Toggle elements opens itself very fast and hard. I would like make it a bit softer. Actually I don't have any idea which class or ID or selector would make affect it.
Demo: jsfiddle
CSS:
.toggle-box + label:before {
background-color: #4F5150;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color: #FFFFFF;
content: "+";
display: block;
float: left;
font-weight: bold;
height: 20px;
line-height: 20px;
margin-right: 5px;
text-align: center;
width: 20px;
}
You could change the following rules in this way:
.toggle-box + label + div {
max-height: 0;
margin-bottom: 10px;
transition: max-height 0.15s linear;
overflow: hidden;
}
.toggle-box:checked + label + div {
height: auto;
max-height: 1000px;
transition: max-height 3s linear;
}
Max-height needs to be setted to a value which your div will never reach.
Here is updated jsfiddle
The nav buttons sit on top of the image title div. Both drop down on hover. When going to the next image, the nav buttons are at the correct location, but when you click on the previous, the whole nav screen shifts to the bottom right!
nav {
position: absolute;
width: 100%
height: 20px;
padding-bottom: 2px;
z-index: 1;
float: right;
margin-top: -20px;
transition: margin-top 200ms ease-in;
background: black;
opacity: 0.4;
right: 1px;
}
.title {
position: absolute;
width: 85%;
height: 20px;
padding-bottom: 2px;
margin-top: -25px;
transition: margin-top 200ms ease-in;
background: black;
color: white;
opacity: 0.6;
}
.title-text {
float: left;
padding-left: 5px;
}
.slides:hover .title {
margin-top: 0px;
}
Here is link to a fiddle.
I fixed this part but code itself is clumsy
anyway still here is example : jsfiddle
first of all you forgot ";" in .nav { between height and width
secondly dont use position: absolute and float it exclude each other
try to connect similiar classes like your buttons
.btn-prev,
.btn-next{
color: black;
background:white;
border: 2px solid white;
margin: 0px 5px 0px 0px;
cursor: pointer;
padding: 0px 5px 0px 5px;
display: inline-block;
}
Quick explain, I set text-align on .nav element so buttons would be set on right side inside .nav and .btn-* for display: inline-block; (default
display: block; so it would behave similiar like text.
I'm trying to make a div in which the size of a font icon scales when hovering over an entire div, not just the specific icon. Something similar to: http://fortawesome.github.io/Font-Awesome/icons/ To clarify, hovering over a <li> item causes a the specific icon to scale, but not the rest. I know how to cause it to change size upon mouseover of the icon itself, but I need it to scale when hovering over the rest of the div.
I'm wondering if this is possible to do simply through CSS, no jQuery/javascript, maybe through some selectors I don't know too well? Thanks in advance.
Quickest example I could think of...
<h1><span>★</span>your text?</h1>
Something like this...
h1 {
display: inline-block;
vertical-align: middle;
font-size: 1rem;
line-height: 1.8em;
border: 1px solid red;
padding: 1em;
}
h1 span {
display: inline-block;
vertical-align: middle;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
Think about it from right to left:
h1:hover h1 span {
font-size: 3em;
}
"any span within an h1 , while h1: is hovered over -> do this... "
ROUND 2: this should spell it out.
HTML
<ul class="icon-list">
<li>
<a href="#">
<div class="your-icon">☃</div>
Some text that doesn't move.
</a>
</li>
</ul>
CSS
.icon-list {
list-style: none;
padding: 0;
}
.icon-list li a {
display: inline-block;
height: 2em;
line-height: 2em;
text-decoration: none;
padding: 0 .5em;
color: #111;
-webkit-border-radius: 1em;
border-radius: 1em;
}
.icon-list li a:hover {
background-color: rgba(255,0,0,.1);
}
.icon-list li a .your-icon {
display: inline-block;
float: left;
width: 32px;
height: 32px;
text-align: center;
}
.icon-list li a:hover .your-icon {
font-size: 28px;
}
If you want it to scale when hovering over the div, you just use the hover selector on the div itself. Add a class to the div like .font-hover then in your css:
.font-hover:hover {
font-size: 12px;
}
Obviously setting the font-size to whatever you want.
See this fiddle
CSS
div {
padding: 3px 5px;
}
div,span {
transition: font-size .7s;
}
span {
display: inline-block;
width: 45px;
vertical-align: middle;
}
div:hover span{
font-size: 23px;
}
HTML
<div><span>OK,</span> Let's get bigger.</div>