Non-opaque text in opaque background - javascript

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);
}

Related

How Can I Make A Slide-Out Using Javascript?

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>

Expand the logo from a half

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);
});

color desaturated image on hover and desaturate again on mouse out html5 css3

The code is ready but I want the image to get colored (i.e. remove grayscale property of IMG) on mouse hover and when the mouse is out the image should get grayscale again.
If it is not possible only by css. javascript is also ok but please no jquery, I don't know jquery.
The code is below:
<style type="text/css">
#ajabox:hover #ajainner{
height:100px;
top:-100px;
}
#ajainner{
width:332px;
overflow:hidden;
height:0px;
background-image:url(../../images/bg_black_50.png);
position:relative;
top:-1px;
transition: top .4s ease-in, height .4s ease-in;
-ms-transition: top .4s ease-in, height .4s ease-in;
-webkit-transition: top .4s ease-in, height .4s ease-in;
-o-transition: top .4s ease-in, height .4s ease-in;
-moz-transition: top .4s ease-in, height .4s ease-in;
}
#ajabox{
width:332px;
margin:0px;
padding:0px;
border:0px;
height:209px
display:-webkit-box;
display:box;
display:-moz-box;
display:-ms-box;
display:-o-box;
overflow:hidden;
}
span{
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
left:10px;
top:10px;
position:relative;
}
img.desaturate {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
-webkit-filter: grayscale(1);
filter: gray;
}
</style>
<script type="text/javascript">
</script>
<body bgcolor="#000000">
<div id="ajabox">
<img src="http://fc03.deviantart.net/fs70/f/2011/123/c/9/adam_jensen__s_army_____________by_gtanmay-d3fh5pw.png" style="width:332px;" class="desaturate"/>
<div id="ajainner">
<span>Adam Jensen's Army</span>
<br />
<span style="font-size:12px">Made from the CD cover of "Assassin's Creed: Brotherhood"<br />Feat. Adam Jensen(Deus Ex: Human Revolution)</span>
</div>
</div>
img { /* Universal settings */
-webkit-transition:all .4s;
-moz-transition:all .4s;
-ms-transition:all .4s;
-o-transition:all .4s;
transition:all .4s;
}
img:not(:hover) {
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
filter:grayscale(100%);
}
img:hover {
-webkit-filter:grayscale(0%);
-moz-filter:grayscale(0%);
-ms-filter:grayscale(0%);
-o-filter:grayscale(0%);
filter:grayscale(0%);
}
The :not selector won't work in older browsers, but neither will filter, so it shouldn't really be much of a problem.
Example Fiddle.

jQuery expanding menu easing without css transition

So, I'm trying to set up a expanding and collapsing menu depending on what item you are hovering. I am using css transitions to make the expanding and collapsing smooth and some jQuery to change width css properties. However, IE doesn't support transition css so I am trying to find a way to do this with jQuery but haven't found a solution. My knowledge isn't the greatest when it comes to jQuery. Any help would be amazing.
<html>
<head>
<style>
.a{
width:100px;
height:100px;
background:#852369;
position:relative;
float:left;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 1s ease;
transition: width 1s ease;
}
.b{
width:100px;
height:100px;
background:#542365;
position:relative;
float:left;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 1s ease;
transition: width 1s ease;
}
.c{
width:100px;
height:100px;
background:#523641;
position:relative;
float:left;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 1s ease;
transition: width 1s ease;
}
</style>
</head>
<body>
<div class="a">This is div a</div>
<div class="b">This is div b</div>
<div class="c">This is div c</div>​
<script>
$(function() {
$('.a').hover(function() {
$('.b,.c').css('width', '50');
$('.a').css('width', '200');
}, function() {
$('.a,.b,.c').css('width', '');
}
);
$('.b').hover(function() {
$('.a,.c').css('width', '50');
$('.b').css('width', '200');
}, function() {
$('.a,.b,.c').css('width', '');
}
);
$('.c').hover(function() {
$('.a,.b').css('width', '50');
$('.c').css('width', '200');
}, function() {
$('.a,.b,.c').css('width', '');
}
);
});​
</script
</body>
</html>
Here is a simple jsfiddle of what I have currently.
http://jsfiddle.net/kevin11189/kRZHL/1/
Thanks,
Kevin
You can use the animate and stop methods to accomplish this:
http://jsfiddle.net/brianpeiris/CgY2b/2/
$(function() {
var menus = $('.menu');
menus.hover(function() {
menus.stop();
$(this).animate({'width': '200'});
menus.not(this).animate({'width': '50'});
}, function () {
menus.stop().animate({'width': '100'});
});
});
<div class="menu a">This is div a</div>
<div class="menu b">This is div b</div>
<div class="menu c">This is div c</div>
.menu{
width:100px;
height:100px;
position:relative;
float:left;
}
.a{ background:#852369; }
.b{ background:#542365; }
.c{ background:#523641; }

Darken img while exposing text on hover

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;
}

Categories