Hello i am having an issue with chrome and safari (firefox seems to work fine) i have this html:
<div>
<a target="_blank" class="newsletter" href="#"><i class="fa fa-newspaper-o"></i></a>
</div>
CSS:
.newsletter i{
height:35px;
width:35px;
color:#FFFFFF;
font-size: 18px;
background-color: #00495e;
border-radius: 100%;
border:1px solid #FFFFFF;
padding:7px;
transition: all 0.5s;
-moz-transition: all 0.5s; /* Firefox 4 */
-webkit-transition: all 0.5s; /* Safari and Chrome */
-o-transition: all 0.5s; /* Opera */
}
.newsletter i:hover{
color:#00495e;
background-color: #FFFFFF;
}
i am not able to hover inside all circle, the place of icon doesnt work. I mean, when i pass mouse over icon inside circle doesnt do the hover effect and doesnt appear the click icon.
Here it is:
.newsletter i {
display:block;
text-align: center;
line-height:35px;
height: 35px;
width: 35px;
color: #FFFFFF;
font-size: 18px;
background-color: #00495e;
border-radius: 100%;
border: 1px solid #FFFFFF;
padding: 7px;
transition: all 0.5s;
-moz-transition: all 0.5s;
/* Firefox 4 */
-webkit-transition: all 0.5s;
/* Safari and Chrome */
-o-transition: all 0.5s;
/* Opera */
}
.newsletter {
text-decoration: none;
}
.newsletter:hover i {
color: #00495e;
background-color: #FFFFFF;
}
https://jsfiddle.net/Lnats6fj/
Related
I am trying to get an effect using css which I keep getting 90% right but each time I try something different, it results in another problem elsewhere.
What I am trying to do:
Have the image zoom on mouseover
Have the text remain in place and not zoom
Problem:
The hover works fine EXCEPT when the mouse goes over the text-overlay (because the effect is on img:hover. I effectively want the text-overlay to be visible to the eyes BUT transparent to the mouse-over
Here is my fiddle: https://jsfiddle.net/knrrrfxo/
I have tried making the image a background image but that creates a whole other list of issues with responsive sizing which also wont work.
Code:
<style>
.tile-wrapper {
margin:0;
padding:0;
overflow: hidden;
position: relative;
}
.new-arrivals-link {
line-height: 0;
}
.new-arrivals-link img {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.new-arrivals-link img:hover {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
.new-arrivals-link img:hover {
opacity: 0.8;
}
.tile-wrapper .text-overlay {
position: absolute;
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
}
.tile-wrapper .text-overlay h2 {
color: white;
font-size: 60px;
line-height: 74px;
margin: 0 0 10px;
}
.tile-wrapper .text-overlay p {
color: white;
font-size: 28px;
}
</style>
<div class="tile-wrapper">
<a href="#" itemprop="url" class="new-arrivals-link">
<img src="https://cdn.shopify.com/s/files/1/1307/5753/files/new-arrivals-tab.jpg?6713767595666642894" width="100%" alt="New Arrivals">
<div class="text-overlay">
<h2>NEW<br>ARRIVALS</h2>
<p>Shop Now</p>
</div>
</a>
</div>
You can set pointer-events: none; on the .text-overlay div.
All you need is change a single selector to apply to hover of the parent instead of the image element, like so (the changed line is indicated by a comment):
.tile-wrapper {
margin:0;
padding:0;
overflow: hidden;
position: relative;
}
.new-arrivals-link {
line-height: 0;
}
.new-arrivals-link img {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.new-arrivals-link:hover img { /* this line has been changed */
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
.new-arrivals-link img:hover {
opacity: 0.8;
}
.tile-wrapper .text-overlay {
position: absolute;
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
}
.tile-wrapper .text-overlay h2 {
color: white;
font-size: 60px;
line-height: 74px;
margin: 0 0 10px;
}
.tile-wrapper .text-overlay p {
color: white;
font-size: 28px;
}
<div class="tile-wrapper">
<a href="#" itemprop="url" class="new-arrivals-link">
<img src="https://cdn.shopify.com/s/files/1/1307/5753/files/new-arrivals-tab.jpg?6713767595666642894" width="100%" alt="New Arrivals">
<div class="text-overlay">
<h2>NEW<br>ARRIVALS</h2>
<p>Shop Now</p>
</div>
</a>
</div>
This works because it applies when the parent element of both the image and the text box is hovered over, which is also true if you hover over any of it's child elements.
I'm working in Dot Net Nuke on a website that has been previously setup. I want to add a css button I found on the internet. I put the html in the html fields and css in the stylesheet editor.
when a link is created it automatically adds ">>" after the link text. In other buttons css buttons I used I managed to remove that, but with this button I can't remove it. Also I want the button to link to another page using "a href". How would i make this possible?
Button HTML:
<div class="btn-container">
<input type="submit" value="button" id="button-blue"/>
<div class="ease"></div>
</div>
Button CSS:
#button-blue {
float: left;
width: 100%;
max-width: 500px;
border: white solid 4px;
cursor: pointer;
background-color: #0493bd;
margin-top: -4px;
color: white;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
letter-spacing: .1em;
padding-top: 22px;
padding-bottom: 22px;
font-weight: 500;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
/* Change text color & background opacity on hover*/
#button-blue:hover {
background-color: rgba(0,0,0,0);
color: #0493bd;
}
/* The white hover effect */
.ease {
width: 0px;
height: 70px;
background-color: white;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
/* Make visable when hover */
.btn-container:hover .ease {
width: 100%;
max-width: 500px;
background-color: white;
border: 0;
}
.btn-container:after {
display: none !important;
}
well you want the button to link to another page, to do that you can simply style your href to look as a button like this (Run the following snippet) -
Submit
<style>
#submit-btn{
display :inline-block;
text-decoration:none;
background-color:blue;
border-radius:4px;
padding:5px 10px;
color:white;
}
</style>
Well for the issue of >> after every link it may be some css that is adding it, which you haven't posted in your question so try adding following code which may remove it..
a:after {
content: none !important;
}
OR this one -
a:after {
display: none !important;
}
or just for the link like button I posted above try this -
#submit-btn:after {
content: none !important;
}
OR
#submit-btn:after {
display: none !important;
}
NOTE - Since you are overwriting CSS don't forget to add !important..
Change to button to href
<div class="btn-container">
Button
<div class="ease"></div>
</div>
CSS
#button-blue{
float:left;
width: 100%;
max-width:500px;
border: white solid 4px;
cursor: pointer;
background-color: #0493bd;
margin-top: -4px;
color: white;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
letter-spacing: .1em;
padding-top: 22px;
padding-bottom: 22px;
font-weight: 500;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
text-align:center;
}
/* Change text color & background opacity on hover*/
#button-blue:hover{
background-color: rgba(0,0,0,0);
color: #0493bd;
}
#button-blue:after{content:">>"}
/* The white hover effect */
.ease {
width: 0px;
height: 70px;
background-color: white;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
/* Make visable when hover */
.btn-container:hover .ease{
width: 100%;
max-width: 500px;
background-color: white;
border: 0;
}
.btn-container:after {
display: none !important;
}
demo link
https://jsfiddle.net/0zctLenb/
I'm making a menu that looks like this one http://exclusivelyhistailoring.com/ Notice how when a link is hovered, the text moves its way to the right and changes colors too.
Unhovered State
Hovered State
Here's what I have so far :
.text-glow {
font-size:4em;
color: #FFFFFF;
font-family:Arial!important;
-webkit-stroke-width: 6.3px;
-webkit-stroke-color: #FFFFFF;
-webkit-fill-color: #FFFFFF;
text-shadow: 1px 0px 20px white;
-webkit-transition: width 0.9s;
/*Safari & Chrome*/
transition: width 0.9s;
-moz-transition: width 0.9s;
/* Firefox 4 */
-o-transition: width 0.9s;
/* Opera */
}
.text-glow:hover, .text-glow:focus .text-glow:active {
color: transparent;
text-shadow: 0 0 5px #000;
}
Any ideas?
That's a flash file, so to create something similar to that using CSS, what you will need is text-indent property or padding-left, whatever you are fine with..
I've made the below demo from scratch..
Demo
html, body {
height: 100%;
background: #FF9000;
}
ul {
margin: 20px;
font-family: Arial;
font-size: 15px;
font-weight: bold;
}
ul li {
margin-bottom: 5px;
text-shadow: 0 0 10px #fff;
color #000;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
}
ul li:hover {
color: #fff;
text-indent: 15px;
}
a {
color: inherit;
text-decoration: none;
}
I downloaded this MENU from dynamicdrive.com but there is someone wrong in it.
It works fine in FireFox , Safari and Chrome. But not working in IE.
In IE 9 or lower, it appears vertical menu not horizontal and hover is not working also.
CSS
<style>
.spotlightmenu{
width: 100%;
overflow:hidden;
}
.spotlightmenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center;
background: #e3e3e3;
}
.spotlightmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px;
}
.spotlightmenu li a{
display:inline-block;
padding: 5px;
min-width:50px;
height:50px;
text-decoration: none;
color: black;
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.spotlightmenu li:hover a{
color: white;
background: #a71b15;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.spotlightmenu li a span{
position:relative;
top:35%;
}
</style>
HTML
<div class="spotlightmenu">
<ul>
<li><span>Home</span></li>
<li><span>About us</span></li>
<li><span>Products</span></li>
<li><span>Contact us</span></li>
</ul>
</div>
If you are testing in IE-9 or lower the transitions will not work. It is currently working in IE-10. Hope this helps.
Your CSS is using the transition timing function. This is not supported in IE 9 or below. The bar is horizontal in all the browsers I tested. If you're using something < IE 9, you should look to get a new computer
Here is the page in questions: http://www.jacobsievers.com/sample.html
In Firefox and IE, My navigation bar displays correctly, but if you look at it with Chrome there is a line break after 'Gallery'. I'm wondering if someone can help me figure out what I need to do or change in my code. Something with the nav ul or nav li in my css?
(source: jacobsievers.com)
(source: jacobsievers.com)
I don't know how to make those scroll box things that other people put code in so here are some jpgs sorry! Thanks for the help.
nav ul {
text-align: center;
width: 700px;
margin: auto;
word-spacing: 50px;
padding: 0;
font-size: 20px;
}
Should fix it :)
EDIT:
/************************ =Nav ************************/
nav ul {
text-align: center;
width: 700px;
margin: auto;
padding: 0;
font-size: 20px;
}
nav li {
display: inline;
margin: auto;
position: relative;
top:30px;
margin-left: 100px;
}
nav li:first-child { margin-left: 0px; }
nav a {
text-decoration: none;
color: rgb(50, 140, 204);
transition: background-color 2s;
-moz-transition: background-color 2s;
/* Firefox 4 */
-webkit-transition: background-color 2s;
/* Safari and Chrome */
-o-transition: background-color 2s;
/* Opera */
transition: color 2s;
-moz-transition: color 2s;
/* Firefox 4 */
-webkit-transition: color 2s;
/* Safari and Chrome */
-o-transition: color 2s;
/* Opera */
}
nav a:hover {
background-color: #E0EEEE;
color: black;
}
jsFiddle - http://jsfiddle.net/andyjh07/cqZTV/