What I'm trying to achieve is a fake loading message as the user hovers over the div before it shows the actual div content.
.info { opacity: 0; width: 200px; height: 300px;transition-duration: 0.3s; transition-delay: 2s; margin-top: -20px; background-color: #000;}
.info:hover { opacity: 1; transition-duration: 0.3s; transition-delay: 2s; }
.access {opacity: 0.0; transition-duration: 0.3s; transition-delay: 0.5s; background-color: #000; color: #fff}
.access:hover { opacity: 1; transition-duration: 0.3s; transition-delay: 0.5s; }
http://jsfiddle.net/499hM/
As you can see, the message appears and then the div but the message reappears over the top of the div and fades it out - I want the message to disappear once the div has "loaded". I'm hoping this can be achieved through CSS alone?
you canuse the adjacent selector and set 2 transitions on 2 different child of your boxe.
the .loading message first in flow, once hovered shows up and the next child (+ .infos) will show up on top of it a little while after. from there, the .infos takes over the :hover to keep on top.
DEMO:
http://codepen.io/gc-nomade/pen/jilLp
<div>
<p class="loading">
loading ...
</p>
<p class="infos">
Infos
</p>
</div>
div {
border:solid;
width:200px;
height:200px;
border:gray solid 5px;
margin:auto;
text-align:center;
position:relative;
}
.loading , .infos{
position:absolute;
top:0;
left:0;
margin:0;
height:100%;
width:100%;
line-height:200px;
background:black;
color:white;
z-index:5;
opacity:0;
}
.infos {
z-index:0;
background:yellow;
line-height:1.2em;;
color:red;
}
.loading:hover {
opacity:1;
}
.loading:hover + .infos, .infos:hover {
opacity:1;
transition:2s 1s;
z-index:10;
}
Related
I'm trying to build a Team section on a Website. I have a Div with an Image and Name of the Person. When I hover over the name, I would like to have a link to appear on its place and move the Name upwards.
Something like this (TEAM Section):
https://www.templatemonster.com/de/demo/55809.html
I tried using a solution I found here and modifying it, but it doesnt really work like I want it to:
#stuff {
position: absolute;
top: 100px;
opacity: 0.0;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
#hover {
width:80px;
height:20px;
background-color:green;
margin-top: 50px;
margin-bottom:15px;
}
#hover:hover {
margin-top:25px;
margin-bottom: 25px;
opacity: 1.0;
}
#stuff:hover {
opacity: 1.0;
}
<link rel="stylesheet" type="text/css" href="main.css">
<section>
<div id="hover">Hover</div>
<div id="stuff">stuff</div>
Is there a simple solution with CSS and/or Bootstrap?
I made an example using just css.
section {
margin:5px auto;
}
.hover-div {
color:#FFF;
width:200px;
}
.hover-div .stuff {
background-color:#F00;
height:100px;
margin-top:0;
position:relative;
width:100%;
z-index:2;
-webkit-transition:margin-top 0.3s;
transition:margin-top 0.3s;
}
.hover-div .stuff-hidden {
background-color:#00F;
height:0;
width:100%;
-webkit-transition:height 0.3s;
transition:height 0.3s;
}
.hover-div:hover .stuff {
margin-top:-40px;
}
.hover-div:hover .stuff-hidden {
height:40px;
}
.image {
background-color:#0F0;
height:100px;
text-align:center;
width:100%;
}
<section>
<div class="image">image</div>
<div class="hover-div">
<div class="stuff">Stuff</div>
<div class="stuff-hidden">Hidden stuff</div>
</div>
</section>
Here is a simple Js slider, and need to make it responsive for mobiles. But when i apply max-width to #slider and #image it hides whole div element. For example default width should be 500pxl and 300pxl height. For wide screen. It should automatically resize depend on mobile and tablet screen width. Is it possible?
html:
<body onLoad="photoA()">
<div id="slider">
<img src="Images/img1.jpg" id="image" >
<img onClick="photo(-1)" class="left" src="Images/arrow_left.png">
<img onClick="photo(1)" class="right" src="Images/arrow_right.png">
</div>
css:
*{
margin:0px;
}
#slider {
height:350px;
max-width:500px;
margin: 5px auto;
position:relative;
border-radius:4px;
overflow:hidden;
}
#image {
height:350px;
width:500px;
position:absolute;
}
.left {
height:50px;
width:50px;
position:absolute;
top:40%;
left:10px;
opacity:1;
transition: all .2s ease-in-out 0s;
}
.right {
height:50px;
width:50px;
position:absolute;
top:40%;
right:10px;
opacity:1;
transition: all .5s ease-in-out 0s;
}
.right:hover , .left:hover {
opacity:0.6; cursor: pointer;
}
What is the reason for positioning your main image absolutely? It will only make your life miserable.
If you make the following changes, you'll get the desired result:
#slider {
width: 100%;
max-width:500px;
height: auto;
margin: 5px auto;
position:relative;
border-radius:4px;
}
#image {
width: 100%;
height: auto;
}
To make your slider look even better, I suggest that you also use:
.left {
height:50px;
width:50px;
position:absolute;
top:50%;
transform: translateY(-50%);
left:10px;
opacity:1;
transition: all .2s ease-in-out 0s;
}
.right {
height:50px;
width:50px;
position:absolute;
top:50%;
transform: translateY(-50%);
right:10px;
opacity:1;
transition: all .5s ease-in-out 0s;
}
Note: The div disappeared because you cannot set max-width to the parent when all its children are positioned absolutely With no widths and heights or max-widths and max-heights (They behave as if they had the values not set).
I am trying to use simple transiton, but I don't understand why it is not working. Could you help me? I put transition: ease-in-out; in container...
my code:
.container{
width:250px;
height:300px;
background:#00f;
position:relative;
transition: ease-in-out;
}
.show{
display: none;
position:absolute;
bottom:0;
height:50%;
width:100%;
color:#000;
text-indent:5px;
background:rgba(255,255,255,.5);
}
.container:hover > .show{
display:block;
}
http://jsfiddle.net/mAzsL/44/
I use this as example: http://jsfiddle.net/n7Ne9/53/
UPDATE:
My aim was to get effect which is called 'fade in a box' - I wasn't precise, sorry.
Update:
On new requirements, the transition effect needs to be different, please refer the below snippet.
.container {
width: 250px;
height: 300px;
background: #00f;
position: relative;
}
.show {
position: absolute;
opacity:0;
height:30%;
bottom:0px;
left:0px;
right:0px;
color: #000;
text-indent: 5px;
background: rgba(255, 255, 255, .5);
transition: opacity 0.5s ease-in-out;
}
.container:hover>.show {
opacity:1;
}
<div class="container">
<div class="show">Lorem </div>
</div>
Old Answer:
The problem is transition property cannot be applied to the CSS property display:none, the workaround for this is to set the height to 0px initially, a problem you will face is that the text will still be visible on the screen. For this overflowing text to be hidden, use the CSS class overflow:hidden which will hide the content which is outside the element. Also instead of using transition on the parent element, use it directly on the element itself. Refer the below class.
.show{
position:absolute;
overflow:hidden;
bottom:0;
height:0px;
width:100%;
color:#000;
text-indent:5px;
background:rgba(255,255,255,.5);
transition: height 1s ease-in-out;
}
The transition property should be as follows.
transition: height 1s ease-in-out;
First mention which property should have the transition effect. Then duration of the transition, then whether ease-in or some other setting.
Then on hover, set the original height. The transition will be seen.
.container:hover > .show{
height:50%;
}
.container {
width: 250px;
height: 300px;
background: #00f;
position: relative;
}
.show {
position: absolute;
overflow: hidden;
bottom: 0;
height: 0px;
width: 100%;
color: #000;
text-indent: 5px;
background: rgba(255, 255, 255, .5);
transition: height 1s ease-in-out;
}
.container:hover>.show {
height: 50%;
}
<div class="container">
<div class="show">Lorem </div>
</div>
I have applied:
-webkit-transition:background-image 0.4s ease-in-out;
background-image: url('http://www.clementinekeithroach.co.uk/wpcontent/uploads/2013/09/about.jpg');
background-position:initial initial;
background-repeat:initial initial;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
border-top-left-radius:0px;
border-top-right-radius:0px;
clear:both;
color:#DDDDDD;
cursor:pointer;
display:block;
font-size:1.8rem;
height:80px;
line-height:80px;
margin:2em auto 0;
text-align:center;
transition:background-image 0.4s ease-in-out;
width:80px;
}
To the "about" image on:
http://www.clementinekeithroach.co.uk/home/
However, unlike all the other images on the site, which fade naturally, and then increase in their darkness when hovered over, this one refused to budge.
Can someone explain where I've gone wrong?
replace your that holds the background for "about" with this code:
remember to remove the background-image attribute from the span's css. Also remove filter and opacity from the span to make this work.
<span class="sidebar-link">
<img src="http://www.clementinekeithroach.co.uk/wp-content/uploads/2013/09/about.jpg" id="myimg">
<style>
#myimg{
height: 100%;
opacity: 0.6;
transition: all 0.3s ease-in-out 0s;
width: 100%;
z-index: 1;
}
#myimg:hover{
height: 100%;
opacity: 1;
transition: all 0.3s ease-in-out 0s;
width: 100%;
z-index: 1;
}
</style>
</span>
i have an image in my website that when i mouse over it this goes left 105px:
.view img {
position: absolute;
z-index: 0;
transition:left 0.5s;
-webkit-transition:left 0.5s;
}
.view:hover img{
left: -105px;
}
i want to divide this "view" into 2 segments horizontally that every segment works different ,when mouse over one segment of the image then image goes left in 105px and another segment do it in another direction (right).i means writing something like this:
.view img {
position: absolute;
z-index: 0;
transition:left 0.5s;
-webkit-transition:left 0.5s;
}
.view:hover 25% right img{
left: -105px;
}
.view:hover 25% left img{
right: 105px;
}
how can i do this?
you can use :before and :after from css3
markup:
<div>hallo JAPAN</div>
style:
div{
position:relative;
width:100px;
height:80px;
background-color:#ccc;
margin:100px auto;
}
div:before,div:after{
content:'';
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
opacity:0;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
div:before{
background-color:red;
background-image:url(http://www.marcwitteveen.com/wp-content/uploads/2013/01/apple-logo.png);
background-repeat:no-repeat;
background-position:center;
}
div:after{
background-color:red;
background-image:url(http://mywindows8themes.com/wp-content/uploads/2011/11/windows_8_metro_logo.png);
background-repeat:no-repeat;
background-position:center;
}
div:hover:before{
left:-100%;
}
div:hover:after{
left:100%;
}
div:hover:before,div:hover:after{
opacity:1;
}
like this http://jsfiddle.net/nXdMn/