Basically i have 2 columns and the left side has an overlaying grey image to create a kind of blur effect. When you mouseover it, it will turn see-through. It works well in Chrome/Safari but not in Firefox and i can't really figure out why.
I uploaded a link to my site to show what i mean:
http://generowicz.nl/showing_template.html
When viewed in Firefox the overlaying image doesnt fit and overlay the whole left side.
html, body {
height: 100%;
margin: 0;
font-size: 15px;
font-family: Helvetica;
font-weight: lighter;
}
#left{
text-indent:1cm;
width: 20%;
height: 100%;
position: fixed;
background: rgba(51,51,51,1);
}
#right {
padding-top:2cm;
width: 80%;
height: auto;
position: absolute;
right: 0;
background: white;
}
#img {
position: absolute;
opacity: 0.4;
width:100%;
height:100%;
pointer-events:none;
-webkit-transition: opacity .25s ease-out;
-moz-transition: opacity .25s ease-out;
-o-transition: opacity .25s ease-out;
transition: opacity .25s ease-out;
color:#000;
}
#left:hover>#img {
opacity: 0;
}
h1{
font-size: 80px;
color:#CCC;
}
h2 {
font-size: 15px;
color: #CCC;
font-weight: lighter;
}
h3 {
font-size: 15px;
color:#CCC;
}
/* These are for main body */
h4 {
font-size: 15px;
color:#000;
}
h5 {
font-size: 15px;
color:#000;
font-weight: lighter;
}
a.one:link {
text-decoration: none;
color: #CCC;
-webkit-transition: all 0.5s ease-out; Saf3.2+, Chrome
-moz-transition: all 0.5s ease-out; FF4+
-ms-transition: all 0.5s ease-out; IE10
-o-transition: all 0.5s ease-out; Opera 10.5+
transition: all 0.5s ease-out;
}
a.one:link:hover {
text-decoration: none;
color: #09F;
}
a.one:visited {
text-decoration: none;
color: #CCC;
-webkit-transition: all 0.5s ease-out; Saf3.2+, Chrome
-moz-transition: all 0.5s ease-out; FF4+
-ms-transition: all 0.5s ease-out; IE10
-o-transition: all 0.5s ease-out; Opera 10.5+
transition: all 0.5s ease-out;
}
a.one:visited:hover {
text-decoration: none;
color: #09F;
}
a.one:active { text-decoration: none;
color: #CCC;
-webkit-transition: all 0.5s ease-out; Saf3.2+, Chrome
-moz-transition: all 0.5s ease-out; FF4+
-ms-transition: all 0.5s ease-out; IE10
-o-transition: all 0.5s ease-out; Opera 10.5+
transition: all 0.5s ease-out;
}
<body>
<div id="left"><img src="images/graysmall.png" name="img" width="93" height="55" id="img" />
<h1> B </h1>
<h2><a class="one" href="../index.html">Home</a></h2>
<h2><a class="one" href="../about.html">About Me</a></h2>
<h2><a class="one" href="../contact.html">Contact</a></h2>
</div>
<div id="right">
<table width="100%" border="0" align="left">
<tr>
<td width="5%"> </td>
<td width="95%" align="left" valign="top">
<!-- TemplateBeginEditable name="Content" -->
<!-- TemplateEndEditable -->
</td>
</tr>
</table>
</div>
</body>
Adding left:0 in your #img class will give the result you need. See the updated class below,
#img {
position: absolute;
opacity: 0.4;
width: 100%;
height: 100%;
pointer-events: none;
-webkit-transition: opacity .25s ease-out;
-moz-transition: opacity .25s ease-out;
-o-transition: opacity .25s ease-out;
transition: opacity .25s ease-out;
color: #000;
left: 0;
}
Because you have not commented these lines Saf3.2+, Chrome , FF4+ etc
-webkit-transition: all 0.5s ease-out; /* Saf3.2+, Chrome all these text should be comment*/
-moz-transition: all 0.5s ease-out; /* FF4+ */
-ms-transition: all 0.5s ease-out; /* IE10 */
-o-transition: all 0.5s ease-out; /* Opera 10.5+ */
transition: all 0.5s ease-out;
Related
How can I make padding for an arrow move the arrow to right on hover?
That is, arrow moves from the text to the right, and when hover disappears, it returns to its place.
#next {
cursor: pointer;
position: absolute;
float: right;
top: 50%;
width: auto;
color: #383736;
font-weight: bold;
font-size: 20px;
user-select: none;
right: 75px;
transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
-ms-transition: 0.2s ease-in;
-moz-transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
}
#next:before{
content:"Next";
position:absolute;
color:#383736;
right: 50%;
opacity: 0;
-webkit-transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
padding-right: 5px;
}
#next:hover:before{
right:100%;
transition: 0.6s ease-in;
-o-transition: 0.6s ease-in;
-ms-transition: 0.6s ease-in;
-moz-transition: 0.6s ease-in;
-webkit-transition: 0.6s ease-in;
opacity:1;
}
<a id="next"><span class="arrow">⟶</span></a>
You can use a translation on the arrow element (the span):
#next {
cursor: pointer;
position: absolute;
float: right;
top: 50%;
width: auto;
color: #383736;
font-weight: bold;
font-size: 20px;
user-select: none;
right: 75px;
transition: 0.2s ease-in;
}
#next:before {
content:"Next";
position:absolute;
color:#383736;
right: 50%;
opacity: 0;
transition: 0.6s ease-in;
padding-right: 5px;
}
#next:hover:before {
opacity: 1;
}
#next span {
display: inline-block;
transition: 0.6s ease-in;
}
#next:hover span {
transform: translateX(50%);
}
<a id="next"><span class="arrow">⟶</span></a>
try this...
#next {
cursor: pointer;
position: absolute;
float: right;
top: 50%;
width: auto;
color: #383736;
font-weight: bold;
font-size: 20px;
user-select: none;
right: 75px;
transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
-ms-transition: 0.2s ease-in;
-moz-transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
}
#next:before{
content:"Next";
position:absolute;
color:#383736;
left: 50%; // <--- here
opacity: 0;
-webkit-transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
padding-right: 5px;
}
#next:hover:before{
left:100%; // <--- here
transition: 0.6s ease-in;
-o-transition: 0.6s ease-in;
-ms-transition: 0.6s ease-in;
-moz-transition: 0.6s ease-in;
-webkit-transition: 0.6s ease-in;
opacity:1;
}
I am trying to change the colour of an h2 tag inside a div.
The other elements inside this div change to white colour when hovered over, only the h2 does not change colour.
I know I can change this in CSS... .well.sb:hover, .well.sb:hover h2, but the bad thing with that is that the h2 part changes colour separately from the rest. When hovering over the whole thing, everything (including h2) should change text-color into white at the same time and at the same speed and for the same one big and only div section. How to make that work?
h2.title-article-sidebar {
font-size: 14px;
font-family: Calibri;
color: #444;
font-weight: 700;
line-height: 1.25em;
margin-top: 0;
}
.article-image-summary-sidebar {
border: 0 solid;
padding-bottom: 0;
-moz-transition: .9s ease;
-webkit-transition: .9s ease;
-o-transition: .9s ease;
-ms-transition: .9s ease;
transition: .9s ease;
}
.well.sb:hover {
color: #FFF;
background-color: #A10000;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
<div class="well sb"><div>
<div class="article-image-summary-sidebar">
<img alt="X" src="http://loremxpixel.com/200/200">
<div class="article-date-summary-sidebar">
20-November-2010
</div>
<div class="article-tag-summary-sidebar">
TAG
</div>
<h2 class="title-article-sidebar">
TITLE WITH H2 TAG!!!!
</h2>
</div>
</div></div>
There are 2 things happening. First, you need to target the h2 more specifically (it's overriding your hover styles). Second, you have conflicting transitions.
h2.title-article-sidebar {
font-size: 14px;
font-family: Calibri;
color: #444;
font-weight: 700;
line-height: 1.25em;
margin-top: 0;
}
.article-image-summary-sidebar {
border: 0 solid;
padding-bottom: 0;
/* -moz-transition: .9s ease;
-webkit-transition: .9s ease;
-o-transition: .9s ease;
-ms-transition: .9s ease;
transition: .9s ease; */
}
.well.sb:hover {
color: #FFF;
background-color: #A10000;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.well.sb:hover h2.title-article-sidebar {
color: #FFF;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
<div class="well sb"><div>
<div class="article-image-summary-sidebar">
<img alt="X" src="http://loremxpixel.com/200/200">
<div class="article-date-summary-sidebar">
20-November-2010
</div>
<div class="article-tag-summary-sidebar">
TAG
</div>
<h2 class="title-article-sidebar">
TITLE WITH H2 TAG!!!!
</h2>
</div>
</div></div>
Just remove color: #444; from h2.title-article-sidebar
Recent version of chrome tend to add transitions in nested elements (not sure about it is a bug or a feature).
Just make sure that children don't have an inherited transition
h2.title-article-sidebar {
font-size: 14px;
font-family: Calibri;
color: #444;
font-weight: 700;
line-height: 1.25em;
margin-top: 0;
}
.article-image-summary-sidebar {
border: 0 solid;
padding-bottom: 0;
-moz-transition: .9s ease;
-webkit-transition: .9s ease;
-o-transition: .9s ease;
-ms-transition: .9s ease;
transition: .9s ease;
}
.well.sb:hover {
color: #FFF;
background-color: #A10000;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.sb * {
transition: 0s;
}
<div class="well sb">
<div>
<div class="article-image-summary-sidebar">
<img alt="X" src="http://loremxpixel.com/200/200">
<div class="article-date-summary-sidebar">
20-November-2010
</div>
<div class="article-tag-summary-sidebar">
TAG
</div>
<h2 class="title-article-sidebar">
TITLE WITH H2 TAG!!!!
</h2>
</div>
</div>
</div>
This will solve it:
h2.title-article-sidebar {
font-size: 14px;
font-family: Calibri;
/* color: #444;*/
font-weight: 700;
line-height: 1.25em;
margin-top: 0;
}
.article-image-summary-sidebar {
border: 0 solid;
padding-bottom: 0;
}
.well.sb:hover {
color: #FFF;
background-color: #A10000;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
<div class="well sb"><div>
<div class="article-image-summary-sidebar">
<img alt="X" src="http://loremxpixel.com/200/200">
<div class="article-date-summary-sidebar">
20-November-2010
</div>
<div class="article-tag-summary-sidebar">
TAG
</div>
<h2 class="title-article-sidebar">
TITLE WITH H2 TAG!!!!
</h2>
</div>
</div></div>
You don't have any problem in your animation as mentioned in some other answers. You have correctly written your code nor there is any specificity problem.
I am attaching a codepen link on which I was trying to solve your problem:
http://codepen.io/Sky-123/pen/mALGQZ
The animations remains intact as you have written them. The only change that I did was added the color:#444 to h2 tag through an inline statement and then removed it on hover in jQuery as it was causing concerns in animation..
Hope it solves your problem.
"Solution" Edit: I ended up just changing the layout a bit to get around this issue, as shown below. The original problematic behavior was present in other browsers as well, so I simply kept the button in place instead of sliding it to the left upon opening the search box.
--------- Original Question ---------
I wasn't sure how to word my title, but let me explain my issue. Using pure CSS and HTML, I'm making an expanding search box. The problem I have is when closing the search box, if you don't move your mouse, the button will still be shown as hovered, even though it has moved. Here is my problem:
What can I do to prevent this, if possible? It just messes with the look of the animation even if you move off of it when you click. The animation is smoother than shown. Using latest Chrome on W7.
CSS:
div#nav-search {
display: inline-block;
height: 34px;
float: right;
font-size: 0;
width: 60px;
position: absolute;
top: 43px;
right: 0;
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
-o-transform: skew(-45deg);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
nav#header-nav.small div#nav-search {
top: 18px;
}
div#nav-search.open {
background-color: #FFBC43;
width: 95%;
}
div#nav-search-wrapper {
display: inline-block;
vertical-align: top;
height: 34px;
width: calc(100% - 60px);
margin: 0;
padding: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
button#nav-search-btn {
display: inline-block;
height: 34px;
width: 60px;
border: none;
background-color: transparent;
outline: none;
cursor: pointer;
margin: 0;
padding: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
button#nav-search-btn span {
-webkit-transform: skew(45deg);
-moz-transform: skew(45deg);
-o-transform: skew(45deg);
display: block;
width: 100%;
height: 100%;
background-image: url({{ 'search-gold.png' | asset_url }});
background-size: 24px;
background-position: center;
background-repeat: no-repeat;
-webkit-transition: background 0.2s ease-in-out;
-moz-transition: background 0.2s ease-in-out;
-ms-transition: background 0.2s ease-in-out;
-o-transition: background 0.2s ease-in-out;
transition: background 0.2s ease-in-out;
}
button#nav-search-btn:hover {
background-color: #FFBC43;
}
button#nav-search-btn:hover > span, div#nav-search.open > button#nav-search-btn span {
background-image: url({{ 'search-brown.png' | asset_url }});
}
HTML:
<div class="nav-right transition">
<span class="phone-number">{{ settings.company_phone }}</span>
<div id="nav-search">
<button id="nav-search-btn"><span></span></button>
<div id="nav-search-wrapper">Wrapper filler text</div>
</div>
</div>
I am trying to get it so that when you hover over the box the '^' will animate upwards. Currently it gets to the right position on the over state but it does not apply the css transistion.
jsFiddle: http://jsfiddle.net/9f9fyaj2/
HTML:
<a href="#">
<div class="scrollToTop">
<i>^</i>
</div>
</a>
CSS:
body{
background: #7A7A7A;
}
.scrollToTop{
color: rgba(255,255,255,1);
background: rgba(0,0,0,0.5);
width: 50px;
height: 50px;
position: fixed;
right: 20px;
bottom: 20px;
}
.scrollToTop i{
position: absolute;
top: 0px;
-webkit-transition: top .02s ease-out;
-moz-transition: top .02s ease-out;
-ms-transition: top .02s ease-out;
-o-transition: top .02s ease-out;
transition: top .02s ease-out;
}
.scrollToTop:hover i{
top:-20px;
}
.scrollToTop:hover{
background: rgba(0,0,0,1);
}
your transition is working well and good.
Just increase the time given for the transition.
Like This:
.scrollToTop i{
position: absolute;
top: 0px;
-webkit-transition: top .5s ease-out;
-moz-transition: top .5s ease-out;
-ms-transition: top .5s ease-out;
-o-transition: top .5s ease-out;
transition: top .5s ease-out;
}
Dear Stackoverflow readers,
Using only CSS3, how do I show a div after a transition is completed.
This is the snippet of HTML I'm working with
<div class="biography">
<p>Title</p>
<p id="moreBio">This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.</p>
</div>
This is the snippet of CSS3 I'm working with
.biography {
width: 100px;
height: 40px;
float: left;
margin: 5px;
background: #3399FF;
color: #ffffff;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
position: relative;
right: 5%;
font-weight: bold;
font-size: 15px;
text-align: center;
padding: 10px;
border-radius: 5px;
opacity: 0.4;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
.biography:hover {
width: 200px;
height: 600px;
margin: 10px 10px 0px -100px;
opacity: 1;
background: #7C7C7C;
}
#moreBio {
opacity: 0;
transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
}
#moreBio:hover {
opacity: 1;
}
I want #moreBio to show after the transition is completed, how would I go about doing that?
Thank you so much in advance.
Add a transition-delay to #moreBio equal to the transition time of .biography, and make the appearance trigger when .biography is hovered upon.
#moreBio {
opacity: 0;
transition: opacity 0.5s 0.5s ease;
-webkit-transition: opacity 0.5s 0.5s ease;
-o-transition: opacity 0.5s 0.5s ease;
-moz-transition: opacity 0.5s 0.5s ease;
}
.biography:hover #moreBio {
opacity: 1;
}
Instead of doing #moreBio:hover you could do .biography:hover #moreBio and then add a delay for the #moreBio transition like so
// ... other code just like it's
#moreBio {
opacity: 0;
transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.biography:hover #moreBio {
opacity: 1;
}
Here is the working sample.