What I have
I applied transition style to rectangle, and I didn't add any hover state for that rectangle class. I saw a weird behaviour where the transition is being applied to that rectangle where it shade in for 3s when page refreshed.. even though there is no such hover states..?
see these images for clarification...,
enter image description hereenter image description here
why is this happening?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.rectangle {
width: 15rem;
height: 15rem;
background-color: #CD2227;
transition: all 3s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>COCO COLA ART</title>
<link rel="stylesheet" href="cocoCola.css">
</head>
<body>
<div class="rectangle">
</div>
</body>
</html>
Related
I created this simple html and CSS to show a hidden div on mouse hover over a button. Now I want add 2S delay to that hidden div after its display status change to Display block and before return to its original state which is display none on mouse out. Thanks. Here is my code,
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.content{
display: none;
}
.btn:hover + .content{
display: block;
}
</style>
</head>
<body>
<div>
<button type="button" class="btn">Hover Me</button>
<div class="content">
<h1>Hello</h1>
</div>
</div>
</body>
</html>
Use opacity and transition-duration :
use opacity to hide the division
and use transition-duration to set transition of 2 seconds
here is example: (RUN SNIPPET CODE)
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.content{
background-color: #4CAF50; /* Green */
border: none;
color: white;
height: 90px;
width: 90px;
opacity: 0;
transition-duration: 2s;
}
.btn:hover + .content{
opacity: 1;
}
</style>
</head>
<body>
<button type="button" class="btn">Hover Me</button>
<div class="content">
</div>
</body>
</html>
How can I delay a :hover effect in CSS?
The attribute you are looking for is transition and transition-delay.
div{
transition: 0s background-color;
}
div:hover{
background-color:red;
transition-delay:1s;
}
This question already has answers here:
How to overlay images
(11 answers)
Closed 2 years ago.
I'm having trouble getting a color overlay on an image tag. I'm not sure why.
The background-color element doesn't appear to working.
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Document</title>
</head>
<body>
<a href="http://google.com" class="image-container">
<img class="image" src="https://img.favpng.com/14/3/12/hamburger-french-fries-fast-food-cheeseburger-small-bread-png-favpng-wz3jTDt4b8xrUBLJveLDpLFfm.jpg" alt="">
<div class="overlay">
<i class="fa fa-heart"></i>
<i class="fa fa-comment"></i>
</div>
</a>
</body>
</html>
this is the mild css code.
.image:hover {
background-color: rgba(0, 0, 0, 0.5);
}
You can't assign a background color to an image. You can do a filter, and adjust it based on CSS filter parameters.
However if you want a specific color to overlay the image you can overlay a div and give it a lighter opacity and change the background color on hover. I included both options in the example snippet.
.image1 {
width: 100px;
}
.image1:hover{
-webkit-filter: contrast(4);
filter: contrast(4);
}
.container{
width: 100px;
height: 100px;
position: relative;
}
.container img{
width: 100px;
height: 100px;
z-index: -1;
}
.overlay{
opacity: 0.3;
width: inherit;
height: inherit;
z-index: 100;
position: absolute;
}
.overlay:hover{
background-color: yellow;
}
<img class='image1' src='https://cdn.pixabay.com/photo/2015/03/04/22/35/head-659652_1280.png'/>
<div class='container'>
<div class='overlay'></div><img src='https://cdn.pixabay.com/photo/2015/03/04/22/35/head-659652_1280.png'/></div>
Instead of keeping the class of image inside the image tag why don't you keep it on the outside.
<div class="image">
<img src="https://img.favpng.com/14/3/12/hamburger-french-fries-fast-
food-cheeseburger-small-bread-png-favpng-wz3jTDt4b8xrUBLJveLDpLFfm.jpg" alt="">
</div>
also change your:
!DOCTYPE html>
instead put:
<!DOCTYPE html>
and you haven't connected your CSS 3 file. So do:
<link rel="stylesheet" href="index1.css">
if your CSS 3 file name is "index1" that is.
But I would just photo shop a copy of it and then say in CSS 3:
.image:hover {
background-image: "where ever you file is";
}
I'm recoding this website for practice purposes. I've changed the background image to black in my codepen because images don't work in codepen. Here's a link to my code. I've also placed the code here in case you can't view the codepen:
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="reset.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<title>Coming Soon</title>
</head>
<body>
<div class="background">
<h2 class="logo">Logo</h2>
<div class="dropdownwrapper">
<h1 class="bigtext">Coming Soon</h1>
</div>
<hr class="divider">
<h4 class="smalltext">35 days left</h4>
</div>
</body>
</html>
STYLES.CSS
body {
background-color: white;
font-size: 10px;
}
.background {
animation-name: fadeout;
animation-duration: .8s;
background-image: url(Images/forestbridge.jpg);
background-size: cover;
background-position: top;
animation-fill-mode: backwards;
height: 100vh;
font-family: "Raleway", sans-serif;
}
.logo {
color: white;
font-weight: 100;
font-size: 1.5rem;
padding: 1rem 0 0 1rem;
}
.bigtext {
color: white;
text-transform: uppercase;
font-size: 4rem;
text-align: center;
padding-bottom: 1rem;
}
.dropdownwrapper {
animation-name: dropdown;
animation-duration: .8s;
animation-fill-mode: forwards;
}
.divider {
border: none;
width: 20%;
height: 1px;
background-color: lightgrey;
margin-bottom: 1.5rem;
}
.smalltext {
color: white;
font-size: 1.25rem;
text-align: center;
}
#keyframes fadeout {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes dropdown {
0% {
margin-top: 10vh;
}
100% {
margin-top: 40vh;
}
}
I also have a reset.css, but it's just a standard Eric Meyer 2.0 reset (I've placed it in the codepen, though). My problem is that when you reload the W3Schools version I'm attempting to recode, the text "COMING SOON" comes down, and the line and "35 days left" text stay in place. However, in my code, the entire block of text comes down. Why is the "COMING SOON" text on my site not coming down by itself when I've only selected it's parent div that the other elements are in? How can I make it so that only the "COMING SOON" text comes down?
Thanks,
Lyfe
This is happening because you are animating the margin-top of the COMING SOON text. Since the element is in the normal document flow, animating the margin gives the impression that the elements after the COMING SOON are also being animated, even though they are not. To resolve this, you should be animating using transform, which manipulates an element's position in place. Check out the forked codepen.
Additionally, if you wish to centre the entire block of text in the centre of the page, you should wrap all of it an div and position it absolutely. I've forked another codepen to demonstrate this.
The slide down effect appears more profound in the second codepen.
I'd like to make color change when hovering h1 as the code shown below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
h1 {color:#aef;font-size: 14em;line-height: 0.1;}
h1:hover {color: #ff9224;}
</style>
</head>
<body>
<h1>More</h1>
</body>
</html>
(The code is also in JS Bin.)
However, I want the color change when hovering on letters only, like, in the picture, the letter area below the green line. I had tried line-height and height to very small values, but both didn't take effect.
Should I change something else? Or just use p to replace h1 for convenience?
try this snippet i created if it helps
.border {
overflow: hidden;
}
h1 {
color: #aef;
font-size: 14em;
line-height: 163px;
margin: 0;
}
h1:hover {
color: #ff9224;
}
<div class="border">
<h1>More</h1>
</div>
I have been created web page using html5, css3 and jQuery.
Now I just confused with creating human image with background-color.
May I know, is possible to create by using html5,css3?
<img src="Saina_hybd.png" style="background-color:red;" />
I need like this, http://s3.postimg.org/vol07gleb/Untitled_2.png
Can anyone help me to do this, thanks in advance.
You can not directly add background color property to image. You just create a div before the image and apply background color property to div and just reduce the opacity of the image.
.image_box {
width: auto;
height: auto;
float: left;
background-color: red;
}
.image_box img {
float: left;
opacity: 0.6;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="image_box">
<img src="http://www.paritybars.com/wp-content/uploads/2013/09/man-ok.png" alt="ok">
</div>
</body>
</html>