How do I make an image change to text when hovered, and back again when the mouse leaves using HTML, CSS and JavaScript? I am currently using HTML5UP's Aerial theme if that makes any difference.
You should be able to do this with just css:
#logo-holder {position:relative; width:992px; height:125px; /*dimensions of image*/}
#logo-holder .image,
#logo-holder .text {transition: opacity 0.5s ease-in-out;}
#logo-holder .text {position:absolute; top:0; left:0; opacity:0;}
#logo-holder:hover .image {opacity:0;}
#logo-holder:hover .text {opacity:1;}
<div id="logo-holder">
<img src="http://spydar007.com/images/logo.png" class="image" />
<div class="text">Show this text on hover</div>
</div>
I've just created a quick and dirty solution, and I have no idea if it is actually what you are looking for, you were extremely vague.
http://codepen.io/alexmccabe/pen/WvOdRw
Essentially, the text is always there but hidden using opacity: 0 and visibility: hidden. This allows us to do a nice transition to get the text to appear.
Biggest plus point, no JS used at all.
Use the below code it really helpful
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS3 hover text animate in div</title>
<style>
.c--anim-btn span {
color: black;
text-decoration: none;
text-align: center;
display: block;
}
.c--anim-btn, .c-anim-btn {
transition: 0.3s;
}
.c--anim-btn {
height: 64px;
font: normal normal 700 1.2em/4em Arial,sans-serif;
overflow: hidden;
width: 200px;
}
.c-anim-btn{
margin-top: 0em;
}
.c--anim-btn:hover .c-anim-btn{
margin-top: -4em;
}
</style>
</head>
<body>
<!-- HINT: hover over button -->
<div class="c--anim-btn">
<span class="c-anim-btn">
Hover Here
</span>
<span>
<a href="http://sanwebcorner.com"><img src="http://3.bp.blogspot.com/-ZFCnUdrABLc/VlMOOwRCNeI/AAAAAAAAA9g/O5-y5ySNyLc/s1600-r/Copy%2Bof%2Bsan-02%2Bcopy.png" style=" height: 35px;
margin-top: 15px;"></a>
</span>
</div>
<h2>www.sanwebcorner.com</h2>
</body>
</html>
Here is the reference
Related
I have two drop-down buttons where the Difficulty button will make the Duration button move to the bottom when you click on it; likewise if you click on the Duration button it will move the Difficulty button to the bottom.
What's interesting is when the Difficulty button is clicked first, then the Duration button, both will be the proper height; but if you click the Duration button first, then the Difficulty button, only the Duration button will close its contents and move to the bottom again. This is what my code looks like:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style_MP.css"/>
</head>
<body>
<div class="main_page">
<h1>Welcome to My Typing Test!</h1>
<h2>Select Your Difficulty and Duration</h2>
<div>
<!--Below, the word "diff" is short for "difficulty" -->
<!--So "diff-settings" means "difficulty settings" -->
<!--"diff-options" means "difficulty options" and so on -->
<div class="difficulty">
<button onclick="myfunction01()" class="diff-settings">Difficulty</button>
<div class="diff-options" id="diff-select">
Beginner
Intermediate
Advanced
Expert
</div>
</div>
<div class="duration">
<button onclick="myfunction02()" class="duration-settings">Duration</button>
<div class="duration-options" id="duration-select">
30 Seconds
60 Seconds
120 Seconds
Custom
</div>
</div>
<script src="script_MP.js"></script>
</body>
</html>
CSS Code:
body{background-color:grey}
.main_page{text-align: center;}
h1{font-size: 50px;}
h2{font-size: 30px; padding-bottom: 40px;}
.difficulty , .duration{
display: inline-block;
margin: 5px;
}
/* This section is for the Difficulty Button only */
.diff-settings{
padding: 20px;
position: relative;
border: none;
box-shadow: none;
background-color: green;
color:white;
font-size: 20px;
width: 130px;
}
.diff-settings:hover, .diff-settings:focus{
background-color:darkgreen;
color:white;
cursor: pointer;
}
.diff-options{
display: none;
font-size: 20px;
width: 130px;
}
.diff-options a{
background-color: green;
color: white;
display: block;
padding: 8px;
text-decoration: none;
}
.diff-options a:hover {background-color: darkgreen;}
.show {display: block;}
/* This section is for the Duration Button only */
.duration-settings{
padding: 20px;
border: none;
box-shadow: none;
background-color: green;
color:white;
font-size: 20px;
width: 130px;
}
.duration-settings:hover, .duration-settings:focus{
background-color:darkgreen;
color:white;
cursor: pointer;
}
.duration-options{
display: none;
font-size: 20px;
width: 130px;
}
.duration-options a{
background-color: green;
color: white;
display: block;
padding: 8px;
text-decoration: none;
}
.duration-options a:hover {background-color: darkgreen;}
.show {display: block;}
What should I change in order to stop both buttons from moving to the bottom when they're clicked?
Just add this ;) :
.diff-options, .duration-options {
position: absolute;
}
When you change the display of a block it was taken into account and moved the following elements. By adding an absolute position, it is no longer taken into account for the calculation of the next element.
Making the parent div of the buttons use flex fixes the problem.
.flex{
display: flex;
justify-content: center;
}
<div class="flex">
<!--Below, the word "diff" is short for "difficulty" -->
<!--So "diff-settings" means "difficulty settings" -->
<!--"diff-options" means "difficulty options" and so on -->
<div class="difficulty">
<button onclick="myfunction01()" class="diff-settings">Difficulty</button>
<div class="diff-options" id="diff-select">
Beginner
Intermediate
Advanced
Expert
</div>
</div>
<div class="duration">
<button onclick="myfunction02()" class="duration-settings">Duration</button>
<div class="duration-options" id="duration-select">
30 Seconds
60 Seconds
120 Seconds
Custom
</div>
</div>
</div>
This is the website I'm working on: http://threesamples.tumblr.com
I'm having the most idiotic problem, but nothing I try seems to work, so I figured I'd come here.
I'm working with a Tumblr theme that doesn't have support for captions (except when clicking through to the image post itself).
What I'm trying to do is place the caption text inside a div on the top center of the photo, so that on rollover:
- photo fades out
- text fades in
Here is the CSS I've got so far:
article.type_photo .photo-stage {
background: {color:Photo Background};
position: absolute;
}
article.type_photo .photo-stage:hover {
background: {color: BackgroundColor};
opacity: 0.5;
transition: 0.75s;
-moz-transition-duration:0.75s;
-webkit-transition-duration:0.75s;
-o-transition-duration:0.75s;
}
article.type_photo .caption-wrap {
background: transparent;
width:720px;
height:300px;
padding-top:10px;
position: relative;
margin: 0 auto;
float: left;
}
article.type_photo .caption {
visibility: hidden;
position: absolute;
margin: 0 auto;
}
article.type_photo .caption:hover {
visibility: visible;
position: absolute;
color: #ffffff;
opacity: 1;
font-family:"Open Sans";
font-size:14px;
text-align: justify;
transition: 0.75s;
-moz-transition-duration:0.75s;
-webkit-transition-duration:0.75s;
-o-transition-duration:0.75s;
}
and here is the Tumblr code for dealing with photo posts:
{block:Photo}
<!-- Photo Post -->
<div class="photo-stage {select:Image Height}">
<div class="photo-wrap" style="background-image: url('{PhotoURL-HighRes}');">
{block:IndexPage}
<img src="{PhotoURL-HighRes}" />
</div>
{/block:IndexPage}
{block:PermalinkPage}
{LinkOpenTag}<img src="{PhotoURL-HighRes}" />{LinkCloseTag}
{/block:PermalinkPage}
</div>
</div>
<div class="caption">
{block:Caption}
{Caption}
{/block:Caption}
{block:Caption Hover}
{Caption Hover}
{/block:Caption Hover}
</div>
{/block:Photo}
I've managed to get the image to fade out, but cannot for the life of me get the text to fade in. Can someone tell me what I'm doing wrong?
So I'm not an expert but I think your problem is that position is not an animatable property. You need to specify that you only want the transition to apply to the visibility property, like so:
transition:visibility 0.75s;
-moz-transition-property:visibility;
-webkit-transition-property:visibility;
-o-transition-property:visibility;
-moz-transition-duration:0.75s;
-webkit-transition-duration:0.75s;
-o-transition-duration:0.75s;
(Or you should be able to merge it all into one statement for the browser-specific statements, too, but you specifically used transition-duration for those, so I left them that way.)
Source:Using CSS Transitions, CSS Animated Properties
This question already has answers here:
I do not want to inherit the child opacity from the parent in CSS
(18 answers)
Closed 9 years ago.
I want to add separate opacity to my header and my div and my form button. I want the div opacity to be 0.5; which is no problem but I don't want my form button to have a opacity. When ever I try to change levels of opacity my header and the form button opacity becomes the same. For example: I want the header opacity to be 0.9 and the div opacity to be 0.5 and no opacity on the submit button, here is my HTML code:
<!DOCtype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Adeventist Youth's Empowerment</title>
<link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<header></header>
<p> </p>
<div id="apDiv1">
<div align="center" class="apDiv1">
<h1 align="center"><cite>"Welcome to the Adventist Youth's Empowerment. At this website you can speak about your problems with others and get encouragement from seventh day adventist youth's who have had the same problems as you. This is a community that does not judge you and all information is kept confidential and only to the community of trusted members. If you are not a seventh day adventist then this website is still for you, All are welcomed!!!! -Shadowcoder </cite></h1>
</div>
<form id="form" method="get" action="Main.html">
<p> </p>
<p> </p>
<p> </p>
<p>
<input type="submit" value="Escape The World" class="button">
</p>
</form>
</body>
</html>
My css is this:
body {
background-image:url(Images/background%20image1.jpg);
background-repeat:no-repeat;
background-size:100%;
background-position:center top;
}
#apDiv1 {
position: fixed;
left: 279px;
top: 100px;
width: 817px;
height: 390px;
}
#apDiv1 .apDiv1 h1 cite {
font-family: Georgia, Times New Roman, Times, serif;
}
#apDiv1 {
background:#FFF;
opacity: 0.5;
border-radius: 20px;
}
#form {
width: 20em; margin: auto;
}
.button {
display: marker;
background-position:center;
width: 9em;
height: 1em;
border:thin;
border-radius: 20px;
padding: 0px;
text-align: center;
font-size: 2em;
line-height: 1em;
color: #FFF;
background-color: #0C0;
}
.button:hover{
color: #000;
background-color: #0C0;
}
header {
width: 100%;
background-image:url(Images/header.gif);
height: 70px;
opacity: 1;
}
* {
margin: 0;
padding: 0;
}
when ever i add opacity to the div the form automatically has that opacity and so does the header.
First off you shouldnt name your div ids and classes the same. It only leads ot confusion. If you formatted your code correctly. It would be very easy to see that oyu never close you apDiv1. You open another one with the same class name. As I mentioned above this is only going to confuse you. Close your outer div at the appropriate place and then it will get its opacity.
<div id="apDiv1">
<div align="center" class="apDiv1">
<h1 align="center"><cite>"Welcome to the Adventist Youth's Empowerment. At this website you can speak about your problems with others and get encouragement from seventh day adventist youth's who have had the same problems as you. This is a community that does not judge you and all information is kept confidential and only to the community of trusted members. If you are not a seventh day adventist then this website is still for you, All are welcomed!!!! -Shadowcoder </cite></h1>
</div>
<form id="form" method="get" action="Main.html">
<p> </p>
<p> </p>
<p> </p>
<p>
<input type="submit" value="Escape The World" class="button">
</p>
</form>
CLOSE THE DIV HERE OR EARLIER IF YOU WANT
After you fix all that... Give your outer div an opacity this way...
background: rgba(64, 64, 64, 0.5)
from your code, you have missed out the closing tag
To answer your question, you can use something like this to your div
#apDiv1 {
background: rgba(255,255,255,0.5);
border-radius: 20px;
}
where rgb is the color in rgb format, and a is for the alpha
Here you go, I have added three opacity in header, form and apDiv1 class. jsfiddle
.apDiv1{
opacity: 0.2;
}
#form {
width: 20em; margin: auto;
opacity: 0.8;
}
header {
width: 100%;
background-image:url(Images/header.gif);
height: 70px;
opacity: 0.7;
}
I would like to do a CSS effect on hovering an image.
I'd like to show a div containing content like text when I hover on an image.
So I'd like to do something with this code:
<div id="image"><img src="image.png"/></div>
<div id="hover">Test message</div>
I have tried to hide the "hover" div in css display and on hover I tried to set the display to block, but its not working...:(
EDIT: I want the text on the image. When I hover the image it should get some opacity BUT the text should not recieve that opacity!
IS there any method to do this?
http://jsfiddle.net/ZSZQK/
#hover {
display: none;
}
#image:hover + #hover {
display: block;
}
Just keep it simple, no need to change your markup.
Update
If you want to change opacity of image on mouse hover, then
http://jsfiddle.net/ZSZQK/4/
#hover {
display: none;
position: relative;
top: -25px;
}
#image:hover {
opacity: .7;
}
#image:hover + #hover {
display: block;
}
Update 2
Since you added a couple of more requirements to your initial question, now it requires a change in the original html markup.
I am assuming you are using html5, and if so, you should use the tags appropriated for your content's context:
<figure>
<img src="http://placekitten.com/200/100" />
<figcaption>Test message</figcaption>
</figure>
and the css
figure {
position: relative;
display: inline-block;
}
figcaption {
display: none;
position: absolute;
left: 0;
bottom: 5px;
right: 0;
background-color: rgba(0,0,0,.15);
}
figure:hover img {
opacity: .7;
}
figure:hover figcaption {
display: block;
}
jsFiddle
Try:
<div id="image">
<img src="image.png"/>
<div class="hover">Test message</div>
</div>
CSS:
#image {
position:relative;
}
#image .hover {
display:none;
position:absolute;
bottom:0;
}
#image:hover .hover {
display:block;
}
Basically what I did was:
Moved text div inside #image div.
Changed id="hover" to class="hover"
Added display:block when #image is hovered and display:none if not.
Some positioning rules, it's just a fast example, let me know if it works.
There are so many ways to do this, but if you want a CSS only approach, you would need to restructure your html to something like:
<div id="image">
<img src="image.png"/>
<div id="hover">Test message</div>
</div>
And then in your CSS hide the message by default:
#hover {display:none;}
Then show the message:
#image:hover #hover {display:block;}
Without JavaScript you can do like this :
1.Make the #hover div be on top of the image and set the opacity:0;
2.Than add this to the css :
#hover:hover {
opacity:1
}
This should resolve your problem.
here is the solution i found on google
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
#mybox {
width:80px;
height:90px;
float:left;
background-color:#0F9;
padding:10px;
}
.Imgdiv {
width:80px;
height:20px;
margin:0px 0px 10px 0px; padding:0px;
cursor:pointer;
background-color:#39C;
}
#mybox .hiddenDiv {
left:0px;
display:none;
z-index:100;
width:80px;
height:50px;
margin:0px;
background-color:#336;
float:left;
}
#mybox:hover .hiddenDiv {
display:block; top:0px; left:8px;
}
</style>
<body>
<div id="mybox">
<div class="Imgdiv"></div>
<div class="hiddenDiv"></div>
</div>
</body>
</html>
Hello If I understand correctly you want something like this:
<div id="wrapper">
<div id="img-wrapper">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSp7bY6nYWTDmFXKSlP4TdCe5ghVQhbt85tQMS8dfZMEGw7QOXiLA">
</div>
<div id="text-wrapper">
<p>Hello world!</p>
</div>
</div>
CSS:
#wrapper{
position:relative;
border:1px solid black;
width:102px;
height:102px;
}
#text-wrapper{
position:absolute;
height:0px;
overflow:hidden;
font-size:14px;
font-family:Arial,Tahoma;
font-weight:bold;
transition: height 1s;
-moz-transition: height 1s; /* Firefox 4 */
-webkit-transition: height 1s; /* Safari and Chrome */
-o-transition: height 1s; /* Opera */
}
#img-wrapper:hover + #text-wrapper{
height:32px;
width:102px;
}
The key to accomplish this is this css line:
#img-wrapper:hover + #text-wrapper{
What it actually does is "When I hover img-wrapper div do some stuff in text-wrapper div"
Check demo here: http://jsfiddle.net/A9pNg/1/
I need to know how to add an a href link to a div? Do you put the a href tag arounf the entire "buttonOne" div? Or should it be around or inside the "linkedinB" div?
Here's my HTML:
<div id="buttonOne">
<div id="linkedinB">
<img src="img/linkedinB.png" width="40" height="40">
</div>
</div>
Can't you surround it with an a tag?
<a href="#"><div id="buttonOne">
<div id="linkedinB">
<img src="img/linkedinB.png" width="40" height="40">
</div>
</div></a>
try to implement with javascript this:
<div id="mydiv" onclick="myhref('http://web.com');" >some stuff </div>
<script type="text/javascript">
function myhref(web){
window.location.href = web;}
</script>
In this case, it doesn't matter as there is no content between the two divs.
Either one will get the browser to scroll down to it.
The a element will look like:
buttonOne
Or:
linkedinB
Try creating a class named overlay and apply the following css to it:
a.overlay { width: 100%; height:100%; position: absolute; }
Make sure it is placed in a positioned element.
Now simply place an <a> tag with that class inside the div you want to be linkable:
<div id="buttonOne">
<a class="overlay" href="......."></a>
<div id="linkedinB">
<img src="img/linkedinB.png" alt="never forget the alt tag" width="40" height="40"/>
</div>
</div>
PhilipK's suggestion might work but it won't validate because you can't place a block element (div) inside an inline element (a). And when your website doesn't validate the W3C Ninja's will come for you!
An other advice would be to try avoiding inline styling.
I'd say:
<a href="#"id="buttonOne">
<div id="linkedinB">
<img src="img/linkedinB.png" width="40" height="40">
</div>
</div>
However, it will still be a link. If you want to change your link into a button, you should rename the #buttonone to #buttonone a { your css here }.
Your solutions don't seem to be working for me, I have the following code. How to put link into the last two divs.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<style>
/* Import */
#import url(https://fonts.googleapis.com/css?family=Quicksand:300,400);
* {
font-family: "Quicksand", sans-serif;
font-weight: bold;
text-align: center;
text-transform: uppercase;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.025s ease;
}
/* Colors */
#ora {
background-color: #e67e22;
}
#red {
background-color: #e74c3c;
}
#orab {
background-color: white;
border: 5px solid #e67e22;
}
#redb {
background-color: white;
border: 5px solid #e74c3c;
}
/* End of Colors */
.B {
width: 240px;
height: 55px;
margin: auto;
line-height: 45px;
display: inline-block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
#orab:hover {
background-color: #e67e22;
}
#redb:hover {
background-color: #e74c3c;
}
#whib:hover {
background-color: #ecf0f1;
}
/* End of Border
.invert:hover {
-webkit-filter: invert(1);
-moz-filter: invert(1);
-ms-filter: invert(1);
-o-filter: invert(1);
}
</style>
<h1>Flat and Modern Buttons</h1>
<h2>Border Stylin'</h2>
<div class="B bo" id="orab">See the movies list</div></a>
<div class="B bo" id="redb">Avail a free rental day</div>
</html>