James here. I have a quick question. I want to add a similar image hover affect like on http://themaxdavis.com , but for some reason I can't quite get it. I want to add to my code when you hover over the picture post (.pic), a black overlay with a 0.5 opacity to fade in over the image itself. Also, if anyone could help me figure out a way to put text inside that black overlay also like Max Davis, that would be AWESOME. Here is the code to the .pic element.
.pic { position:relative; overflow: hidden; float: left;
{block:IndexPage}width:250px;{block:IndexPage}
{block:PermalinkPage}width:500px; margin-top: 39px; margin-bottom:
15px;{/block:PermalinkPage} {block:IndexPage}margin: 15px 15px 0px
0px;{/block:IndexPage} background-color: #FFF; z-index: 1;
{block:IndexPage}box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
-webkit-transition: box-shadow 0.3s ease-out;
-moz-transition: box-shadow 0.3s ease-out; transition: box-shadow 0.3s
ease-out;
-o-transition: box-shadow 0.3s ease-out;{block:IndexPage} }
My website URL is http://-respawn.tumblr.com
PS I'm on my way out the door now, so I will not accept the answers right away, but I will accept them and read them all as soon as I get home.
Cleaned up code:
Assuming that .pic will contain the picture as background or will be an img element.
.pic
{
position:relative;
overflow: hidden;
float: left;
width:250px;
width:500px;
margin-top: 39px;
margin-bottom: 15px;
margin: 15px 15px 0px 0px;
background-color: #FFF;
z-index: 1;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
}
Create an empty div element inside .pic and give it this style.
#emptyDiv
{
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: transparent;
-webkit-transition: box-shadow 0.3s ease-out;
-moz-transition: box-shadow 0.3s ease-out;
transition: box-shadow 0.3s ease-out;
-o-transition: box-shadow 0.3s ease-out;
}
#emptyDiv:hover
{
background-color: rgba(0, 0, 0, 0.5);
}
Related
when on any page at: https://www.worldwideholidays.co.uk/, when scrolling down, only the bottom half of the nav bar follows. The top part (contact details) does not follow. How can I make it so that the whole half follows?
I tried adding in different elements such as .navbar-extra-top and have no luck.
Example code on the homepage:
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
When scrolled:
body #MainMenu.navbar.scrolled {
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
background: #363c48;
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
I created a button. This button is defined by these CSS properties:
#button {
width: 50px;
height: 50px;
border: 3px solid #F1F2F0;
text-align:center;
background-color: #02BFC1;
display: table;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right:0;
-webkit-transition: all 0.5s ease;
cursor: pointer;
box-shadow: 0px 0px 30px rgba(0,0,0,0.4);
animation: blinker 2s ease infinite;
}
This button blinks using the animation blinker that smoothly changes the background-color from a darker to a lighter blue, defined like this:
#keyframes blinker {
50% { background-color: #03FCFF; }
}
It also has a hover animation:
#button:hover {
background-color: #F37C2B;
transform: scale(1.1);
box-shadow: 0px 0px 70px rgba(0,0,0,0.4);
animation-name: none;
}
My problem is this: the hover animation used to be completely smooth before I added the blinker animation. Now, it just instantly changes background-colorto the orange, while the transform: scale(1.1) still changes smoothly.
How can I make it so that hovering the button pauses the blinker animation and smoothly changes background-color, and that the animation resumes by mouse-leaving the button? If possible, I would like to use only CSS for this and no js.
If you prefer, you can modify this JSFiddle to respond.
EDIT: This doesn't work only on chrome, how can I make it so it does?
You have too many things going on in your CSS. As a general rule try to keep things as simple as possible if you want your code to be fast and efficient.
Here is your working code with some explanations:
button {
width: 50px;
height: 50px;
display: block;
border: 3px solid #F1F2F0;
background-color: #02BFC1;
margin: 30px auto;
cursor: pointer;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4);
animation: 2s ease infinite blinker;
transition: background-color .5s ease, transform .5s ease, box-shadow .5s ease; /* it is best to select the properties you want to transition instead of using 'all' */
}
#keyframes blinker {
50% {
background-color: #03FCFF;
}
}
button:hover {
background-color: #F37C2B;
box-shadow: 0px 0px 70px rgba(0, 0, 0, 0.4);
animation: none;
transform: scale(1.1);
}
<button></button>
Don't forget to use the prefixes needed for your project.
I have this bar graph made with html/css/jquery, when you hover a bar you get more info. This "pop up" only gets on top of the previous bars but no the following ones?
Why?
HTML
<li>
<div style='height:87%' class='graphs'>
<span class='info'>2014-05-07 downloads: 461</span>
</div>
</li>
CSS
#bars li {
display: table-cell;
vertical-align: bottom;
z-index:1;
position:relative;
}
#bars li .graphs{
border-radius: 5px 0px 0 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.6) 0 1px 1px;
box-shadow: rgba(0, 0, 0, 0.8) 0 1px 1px;
background-image: linear-gradient(to bottom, #32CD32 0%, #228B22 100%);
background-clip: content-box;
width:100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
display:none;
opacity: 0.8;
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-ms-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
z-index:1;
cursor:pointer;
position:relative;
}
#bars li .graphs:hover{
-webkit-transition: margin-bottom 1s,opacity 1s ease-out, -webkit-transform 1s; /* For Safari 3.1 to 6.0 */
transition: margin-bottom 1s, opacity 1s ease-out, transform 1s;
margin-bottom: 20px;
filter: alpha(opacity=100);
opacity: 1;
}
#bars li .graphs span.info{
display:none;
padding: 5px;
border-radius: 3px 3px 3px 3px;
background-color:rgba(240, 232, 232, 0.9);
position:absolute;
top:0px;
left:-100px;
z-index:3;
width: 100px;
box-shadow: rgba(0, 0, 0, 0.8) 0 1px 3px;
}
More info here:
http://jsfiddle.net/4PNmD/2/
All of #bar's li children share the same z-index. So as they're being added in the DOM, they're seemingly stacking on top of one another semantically. You could add
#bars li:hover {
z-index: 10;
}
to get it function properly.
The issue is due to each one of your li's establishing its own stacking context. z-index only is used for elements within the same context.
The reason that the box appears above bars to the left of its own bar, and is hidden under bars to the right, is because ordering comes into play. The li's are in the same stacking context - the children across li's are not! And since the li's all have the same z-index, the specification indicates that the order of the elements determine which element gets stacked over the other.
ref: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
I have created a simple check-box switch, here is a JSFiddle: http://jsfiddle.net/aseVX as you have noticed, when you click the little circle jumps, i am trying to make it smoothly shift from left to right and right to left. I tried adding CSS transition and that didn't make it work. Any ideas of what I am doing wrong?
/*Checkbox Switch*/
.switch p, .switch label {
display: inline;
}
.switch label {
margin-left: 10px;
}
.switch label > span {
background-color: rgba(0, 0, 0, 0.1);
border: 1px solid #A6A6A6;
width: 50px;
height: 30px;
position: relative;
display: inline-block;
vertical-align: middle;
cursor: pointer;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
-ms-transition: all .15s linear;
-o-transition: all .15s linear;
transition: all .15s linear;
}
.switch input[type="checkbox"]:checked + span {
background-color: #316C94;
border: 1px solid rgba(0, 0, 0, 0.4);
}
.switch span span {
background-color: #fff;
border: 1px solid #A6A6A6;
width: 24px;
height: 24px;
position: absolute;
top: 2px;
left: 2px;
cursor: pointer;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-webkit-transition: all .15s ease;
-moz-transition: all .15s ease;
-ms-transition: all .15s ease;
-o-transition: all .15s ease;
transition: all .15s ease;
}
.switch label > span:hover span {
width: 30px;
}
.switch input[type="checkbox"]:checked + span span {
right: 2px;
left: auto;
border: none;
}
/*Checkbox Switch > Disabled*/
.switch input[type="checkbox"]:disabled + span {
background-color: rgba(0, 0, 0, 0.1) !important;
border: 1px solid #A6A6A6 !important;
}
.switch input[type="checkbox"]:disabled + span span, .switch input[type="checkbox"]:disabled + span span:hover {
background-color: #fff !important;
border: 1px solid #A6A6A6 !important;
width: 24px !important;
}
As Adrift said in the comments, you cannot animate to a state of auto
But, since you said the width is set, you can animate to the left value that fits the width like so
.switch input[type="checkbox"]:checked + span span {
left: 23px;
border: none;
}
Demo
In addition I added a change the left position when the checkbox was checked and it was hovered
The prefixed versions of border-radius are not needed because -moz-border-radius was never a thing and browsers that don't support border-radius will not support transitions or anything like that either
Also, the !importants are not needed, if the selector is has a higher precedence or the same precedence but is further down the stylesheet, the styles will automatically be overridden. This is because CSS is a cascading language, meaning styles will apply over previous ones if they can. !important should try to be avoided as it causes issues when projects get large and such
I use some pretty straightforward css to show a larger image on hover. This is the HTML structure:
<div class="Enlarge">
<img src="small.jpg" />
<span><img src="large.jpg" /></span>
</div>
And here's the CSS:
.Enlarge {
position:relative;
}
.Enlarge span {
position:absolute;
left: -9999px;
}
.Enlarge span img {
margin-bottom:5px;
}
div.Enlarge:hover{
z-index: 999;
cursor:pointer;
}
div.Enlarge:hover span{
top: 110px;
left: 0px;
z-index: 999;
width:500px;
height:300px;
padding: 10px;
background:#eae9d4;
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius:8px;
font-family: 'Droid Sans', sans-serif;
font-size:12px;
line-height:18px;
text-align: center;
color: #495a62;
padding-bottom:20px;
}
However, I would like to add an ease in/out effect to the larger image. I couldn't work that out. If I apply the transition to the , the image will slide in from the left side. This is not what I want. If I apply the effect to the image, it won't work.
Here's the example: Example
Thanks in advance for your input!
Using visibility and opacity you can achieve a fade effect.
JSFiddle Demo
Add these styles:
.Enlarge span {
position:absolute;
left: -9999px;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
div.Enlarge:hover span {
visibility: visible;
opacity: 1;
/* rest of your styles below */