I have and element and on hover it has an arrow appearing.
The problem is that it works on chrome and firefox but does not work on safari 12. It works on safari 10 though.
So far I found out that the problem is content:url('../path/to/arrow.png')
If I replace path to the arrow with content: '1234' then it works for some reason.
here is a full code
<style>
.textwidget a {
border-radius: 0;
background-color: none;
color: #fff;
text-align: center;
font-size: 10px;
text-transform: uppercase;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin-top: 101px;
margin-bottom: 94px;
margin-left: -10px;
}
.textwidget a {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.textwidget a:after {
font-family: "Font Awesome 5 Free" !important;
content: url(../public/assets/images/icons/arrow-right-small-white.png) !important;
font-weight: 600 !important;
position: absolute;
opacity: 0;
top: 3px;
right: 23px;
transition: 0.5s;
}
.textwidget a:hover{
padding-right: 24px;
padding-left:3px;
}
.textwidget a:hover:after {
opacity: 1;
right: 10px;
}
</style>
<div class="textwidget">
<p>
Link
</p>
</div>
So my desired output is that content: url(../public/assets/images/icons/arrow-right-small-white.png)
works also on safari 12
Try mount the arrow on span element instead and do it like in docs, so without content property
Related
I'm looking for help on how to transition a single character on a button when the button itself is hovered over as seen below:
All my attempts so far have just resulted in the whole button shifting to the right rather than the single chevron.
Thanks
Well, it's easy, You have to use pseudo-element for it eg:
Note: Don't decrease width or instead of button will move instead of the animated thing
.button {
border-radius: 4px;
background-color: red;
border: none;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
<button class="button"><span>Hover </span></button>
How to show the scrollable menu when passing the pointer over the div of the text 1x the scrollable menu is displayed.
What I want to do is something similar to the following image:
My code structure:
.spdText {
width: 3em;
height: 1.8em;
line-height: 1.8em;
position: relative;
font-size: 1em;
font-weight: 900;
text-shadow: none;
border-radius: 10%;
color: #29303b;
background-color: hsla(0,0%,100%,.9);
}
.speed {
display: none;
position: absolute;
max-height: 0;
transition: max-height 1s;
}
.speed:hover,
.btnSpd:hover .speed {
display: inline-table;
list-style: none;
max-height: 300px;
transition: max-height 1s;
top: -170px;
}
<div class="spdText">1x
<ul class="speed">
<li>x3</li>
<li>x1</li>
</ul>
</div>
Something like this?
Edit:
First you leave a space above 'spdText'. You position 'speed' over 'spdText' giving it a negative top value.
.spdText {
width: 3em;
height: 1.8em;
line-height: 1.8em;
position: relative;
font-size: 1em;
font-weight: 900;
text-shadow: none;
border-radius: 10%;
color: #29303b;
background-color: hsla(0,0%,100%,.9);
margin-top:5rem; /* You leave a space above */
}
.speed {
display: none;
position: absolute;
max-height: 0;
transition: max-height 1s;
}
.spdText:hover .speed {
display: block;
list-style: none;
max-height: 300px;
transition: max-height 1s;
left:-25px;
background-color: black;
opacity: 0.5;
color: white;
top: -4.4rem;
}
<div class="spdText">1x
<ul class="speed">
<li>x3</li>
<li>x1</li>
</ul>
</div>
<style>
.button {
position: relative;
background-color: #41A0BF;
border: none;
font-size: 20px;
color: #FFFFFF;
padding: 15px;
width: 120px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #69D2F5;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
</style>
<button class="button">Home</button>
How to put link in button?
i tried everything codes available in google but still error in my website
i dont know whats the best code for this
thanks for someone who wants to teach me.
No. Its not possible to add link through css. But you can use jquery
$('.case').each(function() {
var link = $(this).html();
$(this).contents().wrap('');
});
I'll suggest to add anchor tag if you want to add link.
Home
Add link in "#". It'll work.
Four different possibilities to a button become a link (CSS isn't an option):
.button {
position: relative;
background-color: #41A0BF;
border: none;
font-size: 20px;
color: #FFFFFF;
padding-top: 15px;
padding-bottom: 15px;
width: 120px;
text-align: center;
overflow: hidden;
cursor: pointer;
display: inline-block;
text-decoration: none;
}
a, a:active, a:visited, a:focus {
text-decoration: none;
color: white;
font-family: arial, sans-serif;
}
Javascript:<br>
<button class="button" onClick="window.location.href = 'http://example.com'">click</button><br><br>
Inner link:<br>
<button class="button">click</button><br><br>
Wrapper link:<br>
<button class="button">click</button><br><br>
Fake button:<br>
<a href="http://example.com" class=button>click</a>
Please try this:
<button class="button">Home</button>
I think its the easy way to do it.
.button {
position: relative;
background-color: #41A0BF;
border: none;
font-size: 20px;
color: #FFFFFF;
padding: 15px;
width: 120px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #69D2F5;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
a{
text-decoration:none;
}
<button class="button">Home</button>
You can have the link as a button this way
home
Or if you using a css library like bootstrap
home
I have this menu that I want to try some new animation with on the hover state. The problem is that the width transition doesn't seem to work in Firefox, but in Chrome, Safari and IE. I've tried with both Bourbon mixin and without, no help. Is Firefox not capable of having CSS transitions on pseudo elements or what could cause the problem?
Codepen
http://codepen.io/stroperik/pen/ByJjmR
HTML
<ul>
<li><span>Hem</span></li>
<li><span>Tjänster</span></li>
</ul>
SCSS
ul {
list-style-type: none;
}
li {
display: inline-block;
cursor: pointer;
margin: 0 10px;
}
span {
text-transform: uppercase;
font-family: 'Arial';
font-size: 48px;
font-weight: bold;
}
span::after {
display: block;
content: '';
width: 2px;
height: 5px;
background: red;
#include transition(width 0.2s ease);
}
span:hover::after {
width: 100%;
}
Thanks in advance
Looks like Firefox quirk (?), but apparently it needs pseudo-element :after to be positioned in this case:
span {
text-transform: uppercase;
font-family: 'Arial';
font-size: 48px;
font-weight: bold;
position: relative;
}
span:after {
position: absolute;
bottom: 0;
left: 0;
display: block;
content: '';
width: 2px;
height: 5px;
background: red;
#include transition(width 0.2s ease);
}
I will also add that setting a "border" like this would ideally anyway require positioning of :after relatively to its parent span because it allows setting necessary offset easy.
Demo: http://codepen.io/anon/pen/yypeEx
I'm a VERY beginner with CSS and slowly teaching myself how to code to build an online portfolio.
I currently have thumbnails of images that are links, and I want to apply a transition using CSS over the images so that a color block with text fades in when hovered, and goes away when not.
I've found the perfect solution here (scroll until you see three thumbnails): http://geekgirllife.com/place-text-over-images-on-hover-without-javascript/#
This method works fairly well. But the problem that irks me is that when I view the results on Chrome, I see the transition load as the page is loading...so fast almost like a flicker. And for some reason it's only on Chrome. I viewed it on Safari and it's fine.
You can view the problem here in chrome: www.hellolinda.com (sorry, I don't have enough reputations to turn that into a link...lol.)
I've found numerous articles on how to prevent the initial load from happening (like this: http://css-tricks.com/transitions-only-after-page-load/) but haven't had much success.
Any tips would be great!
Here's the HTML
<div class="thumbnail-list">
<a href="../01/">
<img src="images/infographic_sm.jpg" width="200" height="146">
<span class="thumbnail-text"><span>AmLaw 200<br><div class="caption">Print, Infographic</div></span></span>
</a>
And the CSS
.thumbnail-list {
float: left;
margin: 0 25 25 0;
position: relative;
text-align: center;
}
span.thumbnail-text {
background: #f94639;
color: white;
font-family: helvetica, arial, sans-serif;
font-size: 19px;
line-height: 1.15;
letter-spacing: .5px;
cursor: pointer;
display: table;
height: 146px;
left: 0;
position: absolute;
top: 0;
width: 200px;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
span.thumbnail-text span {
display: table-cell;
text-align: left;
padding: 75px 0 0 15px;
}
.caption {
font-family: helvetica, arial, sans-serif;
font-size: 12px;
color: white;
padding: 8 0 0 0;
text-align: left;
position: left;
line-height: 15px;
}
.thumbnail-list a:hover span.thumbnail-text {
opacity: 1;
}
Remove the transiton effect from span.thumbnail-text and add it after the user hovers the thumbnail. Also change <span class="thumbnail-text"> to <div class="thumbnail-text">, it's not good to have a DIV inside a SPAN.
.thumbnail-list {
float: left;
margin: 0 25px 25px 0;
position: relative;
text-align: center;
}
.thumbnail-text {
background: #f94639;
color: white;
font-family: helvetica, arial, sans-serif;
font-size: 19px;
line-height: 1.15;
letter-spacing: .5px;
cursor: pointer;
display: table;
height: 146px;
left: 0;
position: absolute;
top: 0;
width: 200px;
opacity: 0;
}
.thumbnail-text span {
display: table-cell;
text-align: left;
padding: 75px 0 0 15px;
}
.thumbnail-list a .thumbnail-text,
.thumbnail-list a:hover .thumbnail-text {
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.thumbnail-list a:hover .thumbnail-text {
opacity: 1;
}