Here's the page I'm working on:
http://jordankline.design/designs.html
I have a CSS fade in animation on each of those tiles that reveals the name of each project when you hover. It works perfectly on every browser I've tried... except Chrome on my friend's computer, where the animation only occurs when you click (instead of hover). We have the same operating system (Windows) and the same version of Chrome (51.0.2704.106), so I'm not sure what's happening. My only guess is that it might have something to do with her monitor having touch capabilities?
Here's the CSS for the relevant class:
.boxInner .titleBox {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-bottom: 38%;
background: #000;
background: rgba(255,255,255, 0.7);
color: #000;
padding: 10px;
text-align: center;
vertical-align: middle;
font-family: MinionPro;
font-size: 100%;
letter-spacing: 2px;
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
opacity: 1;
}
Add this (since you have no focus or hover selector):
a:hover .titleBox, a:focus .titleBox {
opacity: 1;
}
The :focus ensures it works for keyboard users as well.
Related
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 trying to create a hover button using the following code and it works relatively okay in all browsers except Chrome:
<div id="blur" class="et_pb_module et-waypoint et_pb_image et_pb_animation_off et_pb_image_0 et_always_center_on_mobile et-animated">
<a href="http://vina.typesetdesign.com/wines/reserva/reserva-sauvignon-blanc/">
<img alt="" src="http://vina.typesetdesign.com/wp-content/uploads/2015/11/2015_11_17Vina_Echeverria_Reserva_Sauvignon_Blanc_V1.png">
</a>
</div>
#blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#blur img:hover {
opacity: .4;
z-index: 1;
}
#blur a:hover:before {
background-color: #6d8e3b;
color: #fff;
content: "Learn More";
display: block;
font-size: 12px;
margin-left: auto;
margin-right: auto;
opacity: .9 !important;
padding: 18px;
position: relative;
top: 20em;
width: 70px;
z-index: 2;
margin-top: -3em;
}
For some reason, Chrome won't let you hover over the button without it glitching out and flickering super badly. Is there an easy way around this without having to add in a separate button?
Live Page: http://vina.typesetdesign.com/wines/varietal/
Fiddle: https://jsfiddle.net/35txpy8v/
It's flickering because the element moves while you hover over it. The reason the element is moving is because of the pseudo element's positioning. To work around this, I'd suggest absolutely positioning the pseudo element relative to the parent element. In doing so, the pseudo element's position won't have any effect on the parent element.
Updated Example
#blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
position: relative;
}
#blur img:hover {
opacity: .4;
z-index: 1;
}
#blur a:hover:before {
content: "Learn More";
background-color: #6d8e3b;
position: absolute;
top: 50%;
margin-top: -50px;
color: #fff;
font-size: 12px;
opacity: .9;
padding: 18px;
width: 70px;
z-index: 2;
}
I am new to css and html and have a very small question. I am trying to add a opacity transition to description of an image when mouse hovers over. But it's currently not working and I am not sure why.
code:http://jsfiddle.net/3VHvM/
my html code:
<div class="bucket">
<img src="http://0.tqn.com/d/webdesign/1/0/C/m/1/puppy-in-shade.jpg" alt=""/>
<div class = "img-overlay">
<h3>Typography</h3></div>
</div>
my css code:
.bucket {
width: 31%;
float: left;
position: relative;
margin-top: 1%;
margin-right: 1%;
margin-bottom: 1%;
margin-left: 1%;
text-shadow: 0px 0px 0px;
-webkit-box-shadow: 0px 0px 0px;
box-shadow: 0px 0px 0px;
background-color: rgba(0,0,0,1.00);
overflow: hidden;
}
.img-overlay {
background-color: rgba(0,0,0,1.00);
bottom: 0px;
color: #FFFFFF;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
width: 100%;
z-index: 1000;
transition: opacity 0.05s;
-webkit-transition: opacity 0.05s;
-moz-transition: opacity 0.05s;
}
.bucket:hover .img-overlay {
opacity:0.75;
filter: alpha(opacity=75);
}
.bucket img {
width: 100%;
}
Thank you for your help
1/20th of a second is too fast to see the effect. Try 2s instead.
http://jsfiddle.net/3VHvM/1/
.img-overlay {
background-color: rgba(0,0,0,1.00);
bottom: 0px;
color: #FFFFFF;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
width: 100%;
z-index: 1000;
transition: opacity 2s;
-webkit-transition: opacity 2s;
-moz-transition: opacity 2s;
}
it's working - just too fast for eye to see, you need to decrees the transition speed, try 1s.
this option sets how long will take to the animation to run, 0.05s (s=seconds) it much to fast.
here:
transition: opacity 1s;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
your code is correct. Just the time is too less. try 0.5 sec. you will see the output.
The transition may not even be noticeable unless its .5s or slower. Quentin is right .2s is the fastest that it is noticeable if you're looking for it but if you want a viewer to pay attention to it, you should consider going even slower.
I have some minor problems with some CSS pseudo-elements.
I am trying to make my custom tooltip, fade in and out, when hovering, but it doesn't seems to work.
The pseudo-element, are getting the content from an data-title HTML5 tag.
I have tried this, without any luck:
span:before, span:after {
opacity: 0;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-o-transition: all .2s;
-ms-transition: all .2s;
transition: all .2s;
}
span:hover:after {
content: attr(data-title);
display: block;
opacity: 1;
position: absolute;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
color: #FFF;
background: rgba(0,0,0,0.75);
border-radius: 3px;
left: -20px;
top: 46px;
}
The tooltip shows properly, but without the transition. I have also tried to add a content: "" in the span:before, span:after section, without any luck either.
Here's the fiddle: http://jsfiddle.net/nDq9f/3/
Anyone who can help me please?
I got i fixed!
I but all the styling (display, width, height etc...) in the span:before, span:after part, instead of in the :hover part. Then it all worked perfect!
You can see the fiddle in the bottom of this post.
span:before, span:after {
content: attr(data-title);
display: block;
position: absolute;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
color: #FFF;
background: rgba(0,0,0,0.75);
border-radius: 3px;
left: -20px;
top: 46px;
opacity: 0;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-o-transition: all .2s;
-ms-transition: all .2s;
transition: all .2s;
}
span:hover:after {
opacity: 1;
}
I also added a pointer-events: none; so you can't make the tooltip appear when hovering it, when it has opacity: 0;
Here's the js Fiddle
Try to change this in your span:before, span:after:
span:before, span:after {
content: attr(title);
filter: alpha(opacity=00);
opacity: 0;
-webkit-transition: opacity .6s ease-in-out;
-moz-transition: opacity .6s ease-in-out;
-ms-transition: opacity .6s ease-in-out;
-o-transition: opacity .6s ease-in-out;
transition: opacity .6s ease-in-out;
}
NOTE: the content: attr(title); property makes all sense
There is a siderbar and we do not want it to scroll. So clearly either position:fixed or position:absolute should do the trick, but they don't!
The following happens with position:fixed:
the sidebar glitches on scroll and breaks up and just acts oddly
The following happens with position:absolute:
the sidebar scrolls rather than staying in place.
Here is the css for the sidebar (not correct id name)
#sidebar{
font-family: 'Jura', sans-serif;
position: fixed;
margin-top:80px;
margin-left:1020px;
font-size:18px;
padding-top:0px;
padding-bottom:17px;
text-align:center;
height:420px;
width:300px;
overflow:hidden;
solid #000000;
color:#000000;
-webkit-transition: opacity 0.3s linear;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
background-color:transparent;
opacity: 1;
z-index:999;
}
this is a link to the blog so you can maybe check with developer tools to see the glitching and what exactly is happening.
Why is the positioning acting so odd, and how can that be fixed?
And this happens in safari and chrome, I do not have firefox or internet explorer installed, so I am not sure the response for those browsers
picture of glitch, splits sidebar image up and occasionally will show some of the text:
Remove overflow:hidden from the element with the four-letter F-word.
#???? {
font-family: 'Jura', sans-serif;
position: fixed;
margin-top: 80px;
margin-left: 1020px;
font-size: 18px;
padding-top: 0px;
padding-bottom: 17px;
text-align: center;
height: 420px;
width: 300px;
/*overflow: hidden;*/ <---- remove for "glitch" to go away
color: #000000;
-webkit-transition: opacity 0.3s linear;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
background-color: transparent;
opacity: 1;
z-index: 999;
}
The element is named a censored (I assume) F word!
You want the css overflow property: Overview. Hidden or visible should do the trick.