I want to create a slide out which slides out automatically on page load, stays for 5 seconds and then slides in and show a button which slide it out again when clicked or hovered.
I've prepared a little fiddle that I think does what you're looking for.
<style>
#popup {
width:300px;
height:300px;
top:50%;
margin-top:-150px;
background: grey;
position:absolute;
left: -300px;
-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
}
#popup.active {
left:0;
}
button {
float:right;
}
</style>
<div id="popup">
<button id="close">Close</button>
</div>
<script>
setTimeout(function() {
document.getElementById('popup').className="active";
}, 5000);
document.getElementById('close').onclick=function () {
document.getElementById('popup').className="";
}
</script>
Related
Spin on the popular question. In this case, I have a div that I want to darken when I mouseover, while not darkening the text inside it. I am halfway there; I can achieve this if I mouseover in the div anywhere besides the div that contains the text.
Here is my attempt: http://jsfiddle.net/59M7N/. Notice that if the mouse is over the top region of the box, the hover effect will not occur.
HTML
<div id="text">Hello World</div>
<div id="box">
<div id="opaque"></div>
</div>
CSS
#box {
height:200px;
width:200px;
border:5px solid black;
}
#opaque {
position:absolute;
width:200px;
height:200px;
background-color:black;
opacity:0;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
#opaque:hover {
opacity:0.6;
}
#text {
position:relative;
color:blue;
top:25px;
left:10px;
z-index:5;
}
You can simplify both your HTML and CSS by adding a transition on a background RGBA color on the :hover, the last value being the opacity. As you are transitioning the background only, the text is unaffected.
Demo Fiddle
<div id="box">Hello World</div>
CSS
#box {
height:200px;
width:200px;
border:5px solid black;
color:blue;
background:rgba(0, 0, 0, 0);
transition:background 200ms ease-in;
}
#box:hover {
background:rgba(0, 0, 0, .5);
}
I am trying to implement a Jquery Hover function on my Company Logo. I want to achieve this :
However, I had achieved THIS
I used the following logic :
$(".m1").hover(function() {
dir = !dir;
r = dir? -50 : 0;
t = dir? 50 : 0;
$(".slide").stop().animate({left: r+'px'}, 300);
});
You can check my JS Fiddle here : http://jsfiddle.net/Jiteen/xZ6Hv/
Any sort of Help or Suggestion is Appreciated.
How about the below as a starting point? No need for JS!
Demo Fiddle
HTML
<div>
<div href="#" class="word" data-text="edia">M</div>
<div href="#" class="word" data-text="antra">M</div>
</div>
CSS
.word {
display:inline-block;
font-size:1em;
line-height:1;
position:relative;
font-size:50px;
}
.word:first-child {
color:orange;
}
.word:last-child {
color:grey;
}
.word:after {
content:attr(text);
position:relative;
display:inline-block;
overflow:hidden;
max-width:0;
color:black;
font-size:20px;
transition:max-width .5s ease-in;
}
div:hover .word:after {
max-width:40px;
}
You can achieve this by using a structure like this:
<div class="logo">
<div class="m1">M</div>
<div class="m3">aaa</div>
<div class="m2">M</div>
<div class="m4">aaa</div>
</div>
And animate it by changing the width of .m3 and .m4
jsFiddle
This is what i would do: http://jsfiddle.net/A6vYy/.
Do note though, that if you're using images instead of divs you can skip some of the CSS.
JS
$(document).ready(function () {
$(".logo").on("mouseenter", function () {
$(this).find(".hidden").animate({width: "50px"});
}).on("mouseleave", function () {
$(this).find(".hidden").animate({width: "0px"});
});
});
HTML
<div class="logo">
<div class="part">M</div><div class="hidden">edia</div><div class="part">M</div><div class="hidden">antra</div>
</div>
CSS
.part, .hidden {
width: 50px;
height: 50px;
background: red;
display: inline-block;
font-size: 24px;
text-align: center;
vertical-align: top;
}
.hidden {
width: 0px;
overflow: hidden;
}
Try this out :
<div class="media">
<span class="big">M</span>edia
</div>
<div class="mantra">
<span class="big">M</span>antra
</div>
Css:
.media,.mantra{
width:28px;
overflow: hidden;
float:left;
margin-left:2px;
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-ms-transition: 0.3s linear;
-o-transition: 0.3s linear;
transition: 0.3s linear;
cursor: pointer;
}
.media:hover{
display: inline-block;
height:60px;
width:60px;
float:left;
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-ms-transition: 0.3s linear;
-o-transition: 0.3s linear;
transition: 0.3s linear;
}
.mantra:hover{
display: inline-block;
height:60px;
width:60px;
float:left;
}
.big{
font-size: 2em;
color: #ff8800;
}
Working Demo :http://jsfiddle.net/Jiteen/xZ6Hv/
has anyone any idea if you can do this in jquery? Where clicking on a piece of the logo expands the rest? Example image:
Why use jQuery if this can be achieved using CSS?
HTML:
<div id='icon-wrapper'>
<img id='icon' alt='icon' src='http://i.stack.imgur.com/sKhJf.jpg?s=60&g=1'/>
<p>Text here</p>
</div>
CSS:
#icon-wrapper{
margin:0 auto;
height:110px;
width:110px;
overflow:hidden;
/* CSS Transitions */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#icon-wrapper:after{
content:"";
display:block;
width:100%;
clear:both;
}
#icon-wrapper:hover{
width:300px;
}
#icon-wrapper:hover #icon{
margin-left:200px;
}
#icon{
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
/* Position Absolute to put the icon on the top */
position:absolute;
z-index:10;
/* CSS Transitions */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#icon-wrapper p{
color:black;
font-size:35px;
font-family:arial, helvetica;
/* Fixed width and float left is needed */
width:200px;
float:left;
}
It's long but without using jQuery is a plus point.
Note that we need to use fixed width for the elements, especially for the paragraph.
UPDATE:
For transparent icon, we need to hide the text first, using opacity:0;. Then add CSS Transition so we have smooth effect on hover. Finally, show the text on hover with opacity:1;. But this trick has a bug, sometimes the text didn't 'hide' fast, so it's still shown for a time in the icon. The best solution is adding a background color to the icon, using the same color as the container background.
Updated CSS (transparent text):
#icon-wrapper:hover p{
opacity:1;
}
#icon-wrapper p{
/* ... */
opacity:0;
-webkit-transition: all 2s ease-in;
-moz-transition: all 2s ease-in;
-ms-transition: all 2s ease-in;
-o-transition: all 2s ease-in;
transition: all 2s ease-in;
}
Updated CSS (using background color on the icon):
#icon{
/* ... */
background:white;
}
Here is a jsFiddle
Here is an updated fiddle for transparent icon.
Here is an updated fiddle with background color added to the icon.
Not sure if this is something you want.
Check the demo here: http://jsfiddle.net/SdanM/4/
HTML:
<div id="container">
<div id="img">Hidden Element</div>
<div id="btn">Hover to expand</div>
<div>
CSS: hide the hidden element first
#container {
position: relative;
}
#img {
background-color: yellow;
position: absolute;
width: 100px;
height: 50px;
top: 50px;
left: 50px;
display: none;
}
#btn {
background-color: red;
position: absolute;
width: 50px;
height: 50px;
top: 50px;
left: 50px;
}
jQuery: move the blocks
$("#container").mouseenter( function() {
$("#img").animate({
left: "-=50",
width: "show",
}, 1000);
$("#btn").animate({
left: "+=50",
}, 1000);
});
$("#container").mouseleave( function() {
$("#img").animate({
left: "+=50",
width: "hide",
}, 1000);
$("#btn").animate({
left: "-=50",
}, 1000);
});
HTML:
<div id="slick-slidetoggle">wxyz</div>
<div id="slickbox" >abcd</div>
JS
// hides the slickbox as soon as the DOM is ready (a little sooner that page load)
var hoverVariable=false;
var hoverVariable2=false;
$('#slickbox').hide();
$('#slick-slidetoggle').mouseover(function() {
hoverVariable2=true;
$('#slickbox').slideToggle(600);
return false;
})
$('#slick-slidetoggle').mouseleave(function() {
hoverVariable2=false;
setTimeout(function (){
if(!hoverVariable && !hoverVariable2){
$('#slickbox').slideToggle(600);
return false;}
}, 1000);
})
$('#slickbox').mouseleave(function() {
hoverVariable=false;
setTimeout(function (){
if(!hoverVariable && !hoverVariable2){
$('#slickbox').slideToggle(600);
return false;}
return false;
}, 1000);
})
$('#slickbox').mouseover(function() {
hoverVariable2=false;
hoverVariable=true;
})
CSS
#slickbox {
background: black;
width:100px;
height: 135px;
display: none;
cursor:pointer;
color:white;
}
#slick-slidetoggle{
background: yellow;
width:100px;
height: 135px;
cursor:pointer;
color:black;
}
Now the above functionality is what I want to achieve using purely CSS, which is when I hover over the "wxyz" button "abcd" button should come down and stay visible even is mouse is moved away from "wxyz" for 3 secs.
I tried transition delay with display property but apparently that doesn't work on display property, then I tried position:absolute & visibility & transition delay of visibility, but then the appearance of button got delayed by 3 secs not the hidnig.
I want the "abcd" button to hide after 3 secs of moving the button away from "wxyz" using only CSS or CSS3
Here is an Example (Code here)
(I have written only -webkit, but you could add the other prefixes)
#test2 {
position:absolute;
z-index:1;
background: black;
width:100px;
height: 135px;
opacity: 0;
cursor:pointer;
color:white;
opacity:0;
-webkit-animation-duration: 600ms;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: both;
}
#test {
position:absolute;
z-index:2;
background: yellow;
width:100px;
height: 135px;
cursor:pointer;
color:black;
}
.container {
position:relative;
}
.container:hover #test2 {
opacity:1;
-webkit-animation-name: slideDown;
}
.container:not(:hover) > #test2 {
-webkit-animation-delay:1000ms;
-webkit-animation-name: slideUp;
opacity:1;
}
#-webkit-keyframes slideDown {
0% {
-webkit-transform: translateY(0);
}
100% {
-webkit-transform: translateY(135px);
}
}
#-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(135px);
}
100% {
-webkit-transform: translateY(0);
}
}
Here is a cross browser solution:
Tested on OPERA-SAFARI-CHROME-MAXTHON-FIREFOX
HTML:
<div class="container">
<div id="test">wxyz</div>
<div id="test2" >abcd</div>
</div>
CSS:
#test {
width:100px;
height:100px;
background:yellow;
position:relative;
z-index:2;
}
#test2 {
top:-100px;
width:100px;
height:100px;
background:black;
color:white;
position:relative;
z-index:1;
}
.container:hover #test2 {
top:0px;
transition-property:top;
transition-duration:0.2s;
transition-timing-function: linear;
/* Firefox 4 */
-moz-transition-property:top;
-moz-transition-duration:0.2s;
-moz-transition-timing-function:linear;
/* Safari and Chrome */
-webkit-transition-property:top;
-webkit-transition-duration:0.2s;
-webkit-transition-timing-function:linear;
/* Opera */
-o-transition-property:top;
-o-transition-duration:0.2s;
-o-transition-timing-function:linear;
/* IE */
-ms-transition-property:top;
-ms-transition-duration:0.2s;
-ms-transition-timing-function:linear;
}
.container:not(:hover) #test2 {
top:-100px;
transition-property:top;
transition-duration:0.2s;
transition-timing-function: linear;
transition-delay: 3s;
/* Firefox 4 */
-moz-transition-property:top;
-moz-transition-duration:0.2s;
-moz-transition-timing-function:linear;
-moz-transition-delay:3s;
/* Safari and Chrome */
-webkit-transition-property:top;
-webkit-transition-duration:0.2s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:3s;
/* Opera */
-o-transition-property:top;
-o-transition-duration:0.2s;
-o-transition-timing-function:linear;
-o-transition-delay:3s;
/* IE */
-ms-transition-property:top;
-ms-transition-duration:0.2s;
-ms-transition-timing-function:linear;
-ms-transition-delay:3s;
}
Fiddle: http://jsfiddle.net/BerkerYuceer/2gVLX/
Use the transition to do it as below:
<head>
<style>
#outer {
width: 100px;
height: 50px;
background-color: green;
position: relative;
}
#innerOne {
width: 100px;
height: 50px;
background-color: blue;
}
#innerTwo {
width: 100px;
height: 50px;
background-color: red;
position: absolute;
top: -150px;
left: 100px;
}
#outer:hover #innerTwo {
top: 0px;
-webkit-transition: top 2s ease-out;
-moz-transition: top 2s ease-out;
-o-transition: top 2s ease-out;
transition: top 2s ease-out;
}
#innerTwo:not(hover) {
-webkit-transition: top 1s ease-in 3s;
-moz-transition: top 1s ease-in 3s;
-o-transition: top 1s ease-in 3s;
transition: top 1s ease-in 3s;
}
</style>
</head>
<body>
<div id="outer">
<div id="innerOne">wxyz</div>
<div id="innerTwo">abcd</div>
</div>
</body>
</html>
Some images in my website needs to be darken when hovered, and also in the same time, to expose text that was hidden before that hover(the text will be displayed on top of the darken image).
I already implemented the img-darken part this way - http://jsfiddle.net/4Dfpm/.
What is a good way to implement the "expose text on hover(the same hover)" part?
Can it be done only with CSS, or I'll need to use a script this time ?
Thanks.
** How the img-darken part already implemented:
a.darken {
background: black;
}
a.darken img {
display: block;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 0.7;
}
CSS Solution
Worked on your jsfiddle and changed jsfiddle is http://jsfiddle.net/4Dfpm/55/
I have added < span > inside < a > tag with class=darken
<span>text</span>
And updated css is
a.darken{
...;
position:relative;
...
}
new css added is
a.darken span{position:absolute;top:5px;color:#000;left:10px}
a.darken:hover span{color:#fff;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
Obvious jQuery solution: Add the message in the markup:
<a href="http://google.com" class="darken">
<img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200">
<span class="message">Some message here</span>
</a>
Add some css:
a.darken span{
display:none;
position:absolute;
top:0px; left:0px;
float:left;
color:white
}
Sprinkle of JQuery:
$('.darken').hover(
function(){
$(this).find('.message').fadeIn(1000);
},
function(){
$(this).find('.message').fadeOut(1000);
}
);
Et Voila: http://jsfiddle.net/4Dfpm/56/
Use a script to do that
HTML:
<div class="hoverText">Some text</div>
Js:
$("img").hover(
function () {
$(".hoverText").show();
},
function () {
$(".hoverText").hide();
}
);
Css:
div.hoverText{display = none;}
This a fiddle:
http://jsfiddle.net/HFgGx/
Adjust this mockup with your logic ;)
If you add a span inside the anchor, give it an RGBA color of white with no alpha, then on hover change the alpha value, you'll get the effect you want with CSS alone:
<a href="http://google.com" class="darken">
<img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200">
<span>text</span>
</a>
Don't forget to position the span within the anchor, so that it doesn't display beneath the image.
a.darken {
display: inline-block;
background: black;
padding: 0;
position: relative;
}
a.darken span
{
position: absolute;
top: 10px;
left: 10px;
color: rgba(255, 255, 255, 0);
}
a.darken:hover span
{
color: rgba(255, 255, 255, 1);
}
http://jsfiddle.net/Kyle_Sevenoaks/4Dfpm/57/
Check the fiddle :
http://jsfiddle.net/4Dfpm/59/
all done throught css. althought you can achieve it with jQuery too,
your html i edited little bit:
<a href="http://google.com" class="darken">
<img src="http://callzeb.com/themes/images/JQuery_logo.png">
<span>123</span>
</a>
and edited little bit of css too:
a.darken {
display: inline-block;
background: black;
padding: 0;
width:229px;
height:200px;
overflow:hidden;
position:relative;
text-align:center;
}
a.darken img {
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 0.7;
}
a.darken:hover span{
display:block;
position:absolute;
z-index:9999;
bottom:10px;
color:red;
font-size:24px;
}
span{display:none;}
Try this http://cssdesk.com/hrKeE
.captioned {
position:relative;
display:inline-block;
}
.captioned img {
display:block;
}
.captioned .caption {
position:absolute;
top:0;
left:0;
display:none;
width:100%;
height:100%;
color:white;
background:rgba(0, 0, 0, .75);
}
.captioned:hover .caption {
display:block;
}