Screenshots here
I'm trying to animate a hover for a full screen background image using CSS. (Screenshots 1&2) but I also want my navigation to use my list class styles instead of the navigation I used from this tutorial. (Screenshots 3&4). How can I get the classes to function as the adjacent sibling of the hovering images instead of the anchor?
Here is my CSS
html {
background: url(scarf6.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
.container {
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
top:0;
left:0;
}
.container img {
position: absolute;
top: 0%;
left:0%;
z-index: -60;
height:100%;
}
.container li img {
position: absolute;
top: 0%;
left: 100%;
height:100%;
z-index: -50;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
ul {
list-style: none;
}
nav {
top:0%;
right:0%;
left:100%;
height:100%;
width:30px;
z-index: 1;
display: block;
}
li a:hover + img {
left: 0px;
}
.red {
background: #FF9999;
}
.white {
background:#FAF0E6;
}
.pink {
background: #FFC0CB;
}
.fuscia {
background:#FF0033;
}
.l1 {
height:4%;
width:100%;
}
.l2 {
height:.7%;
width:100%;
}
.l3 {
height:1.3%;
width:100%;
}
.l4 {
height:.7%;
width:100%;
}
.l5 {
height:1.3%;
width:100%;
}
.l6 {
height:.7%;
width:100%;
}
.l7 {
height:2.7%;
width:100%;
}
.l8 {
height:3.3%;
width:100%;
}
.l9 {
height:5.4%;
width:100%;
}
.l10 {
height:1.7%;
width:100%;
}
.l11 {
height:6.7%;
width:100%;
}
.l12 {
height:.8%;
width:100%;
}
.l13 {
height:4.2%;
width:100%;
}
.l14 {
height:5%;
width:100%;
}
.l15 {
height:5.8%;
width:100%;
}
.l16 {
height:3.3%;
width:100%;
}
.l17 {
height:2.5%;
width:100%;
}
.l18 {
height:1.1%;
width:100%;
}
.l19 {
height:34.5%;
width:100%;
}
.l20 {
height:3.1%;
width:100%;
}
.l21 {
height:5%;
width:100%;
}
.l22 {
height:6.2%;
width:100%;
}
And my HTML
<body>
<div class="container">
<div class="overlay">
<nav>
<li class="l1 pink">
Home
<img src="../../Cover.png" alt="">
</li>
<li>
About
<img class="hidden">
</li>
<li>
Clients
<img class="hidden">
</li>
<li>
Work
<img class="hidden">
</li>
<li>
Contact
<img class="hidden">
</li>
</nav>
</div>
</div>
</body>
Thank you for your help!
Place the image as background-image of li or a. If you don't want to display image, place it via background-position to some not-make-sence area - e.g. if image if 32px high, place it:
background-position: left 32px;
It will make this image somehow invisible. (Important note: it's better, that element with this background is as display: block). Then, when hovering, you will place image back:
...:hover {
background-position: left top;
}
I'm using this in many cases. Also when switching two images - in fact, both of them are in one image and only moving background-position when hovering.
Related
I would like, same as when you hover a GIF shot on Dribbble, display a div with infos when the cursor is after/at 50% from top of the item height.
Tested example
I made this, this is working but a bit tricky… especially when you mouseout.
— http://codepen.io/anon/pen/meZbJK
Used CSS code
.item {
position:relative; width:960px;
&--infos {
opacity:0;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
padding:0 10%;
text-align:center;
background:transparentize(#a7ecf8, 0.075);
transition:opacity 200ms ease-in-out;
}
p {
position:relative;
padding:0;
top:50%; transform:translateY(-50%);
}
strong {
display:inline-block;
margin-bottom:10px;
}
time {
color:#959595;
font-size:14px;
}
&--infos-target {
position:absolute;
bottom:0;
float:left;
width:100%;
height:50%;
}
&--infos-target:hover &--infos {
opacity:1;
top:-100%;
height:200%;
}
}
I made edits to your codepen to make it work.
Essentially, I took --infos out of --infos-target and used the ~ selector to grab it on hover. With that, I didn't have to do the top: -100%; height: 200% hack anymore.
Combine that with pointer-events: none on --infos and you're good to go.
Using z-index you can position the target above the info section and you're good to go.
The biggest issue here is that you cannot have links inside the info section because of pointer-events: none
http://codepen.io/anon/pen/XmLrgp
HTML
<div class="item">
<img src="http://lorempicsum.com/futurama/960/250/1" alt="">
<div class="item--infos-target">
</div>
<div class="item--infos">
<p>
<strong>Item title</strong>
<br>
<time datetime="2015-11-05 15:23:26" class="date">Added two weeks ago</time>
</p>
</div>
</div>
SCSS
.item {
position:relative; width: 960px;
&--infos {
opacity:0;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
padding:0 10%;
text-align:center;
pointer-events: none;
background:transparentize(#a7ecf8, 0.075);
transition:opacity 200ms ease-in-out;
z-index: 9;
}
p {
position:relative;
padding:0;
top:50%; transform:translateY(-50%);
}
strong {
display:inline-block;
margin-bottom:10px;
}
time {
color:#959595;
font-size:14px;
}
&--infos-target {
position:absolute;
bottom:0;
float:left;
width:100%;
height:50%;
z-index: 10;
}
&--infos-target:hover ~ &--infos {
opacity:1;
}
}
I think we need a bit of trickery here.
Firstly we need to "hide" the top 50% of the div/image from acting as a hover point/trigger.
We can use an absolutely positioned pseudo-element for that.
This means we can use the image (rather than the div) as our hover trigger...but this causes issues as the overlay would stop the hover effect. We can disable that with pointer-events:none.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
text-align: center;
}
.parent {
display: inline-block;
margin: 25px;
position: relative;
overflow: hidden;
}
.parent img {
display: block;
}
.info {
position: absolute;
top:100%;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,0,0,.5);
color:white;
line-height: 72px;
transition:top .25s ease;
pointer-events:none;
z-index:3;
}
.parent::before {
content: '';
position: absolute;
top:0;
left: 0;
height: 50%;
width: 100%;
background: rgba(0,0,0,.5); /* for demo visual reference */
z-index:2;
}
.parent img:hover ~ .info {
top:0;
}
<div class="parent">
<img src="http://lorempixel.com/g/200/200" alt="" />
<div class="info"><h3>Some Text</h3></div>
</div>
I would like to have a social bar on the right, and scrolling with the page. This is ok, but I would like to add some behaviors: If you hover the facebook logo, the logo moves to the left, and shows the like button. And same behavior for twitter. I already made a jsfiddle, so here's the link: Demo here.
In the fiddle, at the moment my whole bar moves to the left, but I want the social buttons moving individually.
I am fine with JavaScript/jQuery, if necessary.
Here's my CSS and HTML code:
.off-canvas-buttons{
background-color:rgba(0,0,0,0.5);
top:10%;
height:auto;
right:55px;
width:100px;
text-align:center;
position:fixed;
line-height:50px;
transition:transform 1s ease;
}
.off-canvas-buttons > *, .off-canvas-buttons > * > *{
height:50px;
border:1px dashed red
}
.off-canvas-buttons:hover{
transform:translate(-55px);
}
.backtotop{
width:45px;
}
.facebook-logo, .twitter-logo{
background-color:rgba(200,0,0,0.5);
width:45px;
float:left;
}
<div class="off-canvas-buttons">
<div class="facebook">
<div class="facebook-logo">FB</div>
<div class="facebook-like">Like</div>
</div>
<div class="twitter">
<div class="twitter-logo">Twi</div>
<div class="twitter-follow">Follow</div>
</div>
<div class="backtotop">▲</div>
</div>
I've found what I wanted to (it was a CSS rule problem). Here is the updated fiddle: updated fiddle
Here is the code:
.cover {
right: 0;
height: 100%;
width: 110px;
background: red;
position: fixed;
}
.off-canvas-buttons {
top: 10%;
height: auto;
right: 55px;
width: 100px;
text-align: center;
position: fixed;
line-height: 50px;
}
.off-canvas-buttons > * {
height: 50px;
background-color: rgba(0, 0, 0, 0.4);
}
.social {
transition: transform 2s ease;
}
.off-canvas-buttons > .social:hover {
transform: translate(-55px);
}
.off-canvas-buttons > .social:hover >:first-child {} .backtotop {
width: 45px;
}
.facebook-logo,
.twitter-logo {
width: 45px;
float: left;
}
<div class="cover">
<div>
<div class="off-canvas-buttons">
<div class="facebook social">
<div class="facebook-logo logo">F</div>
<div class="facebook-like action">L</div>
</div>
<div class="twitter social">
<div class="twitter-logo logo">T</div>
<div class="twitter-follow action">S</div>
</div>
<div class="backtotop">▲</div>
</div>
How to make the opacity layer the same size as the img.
Right now the opacity layer has the same size as my img, but that's only because I edited it too the same size, but when I make my screen smaller it won't be the same size anymore as the img.
PS: is there a way to make content: "Work"; show up in the middle of the img instead at the top?
fiddle:
http://jsfiddle.net/nSLXF/
Html:
<body>
<img id="logo" src="Images/logo.png" alt="Logo">
<hr id="line" size="4" color="#09b981" align="center">
<a id="reach" href="about.html"><img src="Images/Reach.png" alt="Reach"></a>
<a id="contact" href="contact.html"><img src="Images/contact.png" alt="contact"></a>
<a id="werk" href="work.html"> <img src="Images/work.png" alt="werk"> </a>
</body>
css:
#reach img
{
text-align: center;
display: block;
margin: 0 auto;
width: 100%;
height:auto;
}
#reach:after {
content:'Work';
color:#fff;
position:absolute;
margin-top:11.2%;
margin-left: 25.2%;
width:49.6%; height:40.3%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.8s;
-webkit-transition: all 0.8s;
font-size: 42px;
font-family: Helvetica;
}
#reach:hover:after
{
opacity:1;
}
In fact you set the size and left, top wrongly for the layer which is actually a :after element. You can just set left:0, top:0 and width:100%, height:100% for it and use position:relative for the a element. The size of img should fit the size of the parent a element:
#reach {
text-align: center;
display: block;
margin: 0 auto;
width: 50%;
position:relative; /* add this */
}
#reach:after {
content:'Work';
color:#fff;
position:absolute;
/* update this */
width:100%;
height:100%;
top:0;
left:0;
/*------*/
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.8s;
-webkit-transition: all 0.8s;
font-size: 42px;
font-family: Helvetica;
}
Demo.
I've been trying to create a very simple gallery with a main image and three thumbnails down the right side, which when hovered over will display themselves as the main image. I used a found jfiddle and tried to edit it for my own needs but seem to have agot a bit mixed up along the way! This is my first time using css transitions to create something like this so it could quite possibly be something very obvious - i just can't see it.
The code I have is as follows:
<div id="gallery">
<div class="thumb" id="thumb-1"><img alt="" src="/wp-content/themes/magicmirror/images/gallery1-thumb.jpg" /></div>
<div class="main"><img alt="" src="/wp-content/themes/magicmirror/images/gallery1-main.jpg" /></div>
<div class="thumb" id="thumb-2"><img alt="" src="/wp-content/themes/magicmirror/images/gallery2-thumb.jpg" /></div>
<div class="main"><img alt="" src="/wp-content/themes/magicmirror/images/gallery2-main.jpg" /></div>
<div class="thumb" id="thumb-3"><img alt="" src="/wp-content/themes/magicmirror/images/gallery3-thumb.jpg" /></div>
<div class="main"><img alt="" src="/wp-content/themes/magicmirror/images/gallery3-main.jpg" /></div>
</div>
#gallery {
position: relative;
width: 470px;
height: 350px;
float: left;
margin: 0 35px 20px 0;
}
#gallery .thumb img {
height: 110px;
width: 110px;
}
#gallery .main img {
height: 350px;
width: 350px;
}
#gallery .thumb {
cursor: pointer;
left: 357px;
position: absolute;
display: block;
width: 112px;
height: 112px;
border: 1px solid #6d6d6d;
}
#thumb-2 {
top: 117px;
}
#thumb-3 {
top: 234px;
}
#gallery .main {
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
position: absolute;
border: 1px solid #6d6d6d;
}
#gallery .thumb:hover + .main {
opacity:0;
}
Hovering on the thumbnail should show the corresponding image in the main view. But you're doing it reversely (which hides the image in the main view with opacity:0). So try changing it like this:
#gallery .main {
opacity: 0; /* changed 1 to 0 */
...
}
/* always show the first initially */
#gallery > .main:nth-of-type(2) {
opacity:1;
}
#gallery .thumb:hover + .main {
opacity:1; /* changed 0 to 1 */
}
Demo.
NOTE: The demo just solves your problem mentioned in the question. To make it an acceptable gallery, I think you have to change the layout (HTML code) if you want a pure CSS solution, otherwise you have to add more script code.
I'm trying to display div.overlay on hover of embedded div.box
div.overlay {padding:5px; background:#F00; width:100px; visibility: hidden;}
div.box {display:block; background:#FF0; width:100px; visibility:visible;}
div.box:hover div.overlay { visibility: visible;}
<div class="overlay">
<div class="box">Info about a game</div>
Play
</div>
Thanks for any hint
I suggest you change the markup slightly if possible. It will make it possible to do what you want.
Option 1:
HTML
<div class="box">Info about a game</div>
<div class="overlay">Play</div>
CSS
div.box,
div.overlay {
width: 100px;
background: #FF0; }
div.overlay { display: none; }
div.box:hover + div.overlay { display: block; }
See fiddle: http://jsfiddle.net/3uM49/
Option 2
HTML
<div class="box">
Info about a game
<div class="overlay">Play</div>
</div>
CSS
div.box {
width: 100px;
background: #FF0; }
div.overlay { display: none; }
div.box:hover div.overlay { display: block; }
See fiddle: http://jsfiddle.net/kgXDT/
You could hover on the parent element and that seems to make it work e.g:
div.overlay:hover {
visibility: visible;
}
Fiddle: http://jsfiddle.net/52sM5/
copy and replace your css with my css
div.overlay {padding:5px; background:#F00; width:100px; visibility: hidden;}
div.box {display:block; background:#FF0; width:100px; visibility:visible;}
div.overlay:hover { visibility: visible;}