I want to show hover style but in the output nothing is showing
This is my html page
<html>
<head>
<style rel="spreadsheet" type="text/css" src="hover_check.css">
<title>hover effect</title>
<head>
<body>
<div class="hover">
<img src="java3.jpg">
<div class="image">
Full Image
</div>
</div>
</body>
</html>
And my css file is as follows
.hover .image {
opacity: 0;
overflow:visible;
border:100px solid rgba(0,0,0,0.7);
box-sizing:border-box;
transition: all 0.4s ease-in-out;
}
.hover a.info {
position:relative;
top:-10px; /* Center the link */
opacity: 0;
transition: opacity 0.5s 0s ease-in-out;
}
.hover:hover .image {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.hover:hover a.image {
opacity:1;
transition-delay: 0.3s;
}
img {
height:60px;
width:60px;
}
If I remove my css link from the html page then my image was visible.
The thing that causing problem => <style rel="spreadsheet" type="text/css" src="hover_check.css">
Rewrite this line as: <link rel="stylesheet" type="text/css" src="hover_check.css" />, the styles will start working. Also close the <head> tag properly.
The final code should look like:
<html>
<head>
<link rel="stylesheet" type="text/css" src="hover_check.css" />
<title>hover effect</title>
</head>
<body>
<div class="hover">
<img src="java3.jpg">
<div class="image">
Full Image
</div>
</div>
</body>
</html>
Cheers!
Try to close the <head> tag, you have open it two times ;)
Also, I think the correct markup to link a stylesheet is:<link rel="stylesheet".... not <style rel="...
W3C validator
Here is a useful tool to validate your html, some errors come often from an incorrect markup. This tool alerts you that errors.
Add head tag with link tag instead of style tag. Please check the code.
<head>
<link rel="stylesheet" type="text/css" href="../StyleSheet.css" />
<title>hover effect</title>
</head>
<body>
<div class="hover">
<img src="java3.jpg">
<div class="image">
Full Image
</div>
</div>
</body>
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;
}
I've this HTML file. I'm trying to implement :hover property so when I pass over .linux-face element the .info element set opacity to 0.
I'm trying to get out of this for about 30 minutes. I've also try to map :hover to other class but nothing seems working.
<!DOCTYPE html>
<html>
<head>
<!-- Setup -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#300;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="main.css" />
<title> Linus Torvald aka Linux </title>
</head>
<body id="main">
<section class="main-section">
<div class="container">
<h1 id="title" class="main-title"> Linus Torvald </h1>
<div class="image-section" id="img-div">
<img id ="image" class="linux-face" src="img/linus_torvald.jpg" alt="Linus Torvald smiling face :)">
<p id="img-caption">Linus Torvald smiling face :) </p>
</div>
<div class="info">
<p id="tribute-info"> <span class="linux_info"> Hello, World! </span> </p>
</div>
</div>
</body>
</html>
That's my scss file:
#main {
display: flex;
justify-content: center;
}
.main-title {
font-family: 'Josefin Sans', sans-serif;
}
.linux-face {
&:hover {
.info{
opacity:0;
}
}}
If I try something like
.linux-face:hover {
opacity: 0;
}
the hover effect on .linux-face works fine.
Also this work fine
.container:hover {
.info {
opacity: 0;
}
}
.linux-face {
&:hover {
.info {
opacity: 0;
}
}
}
gets compiled into
.linux-face:hover .info { opacity: 0; }
but .linux-face is an img element so you are actually targeting a nested element inside the image which clearly doesn't exist —
if your goal is to change the opacity of the .info element when you hover the image then you can't simply do it with the given markup: the most you could do is .image-section:hover + .info { opacity: 0 } so it will work if you hover either the image or the caption paragraph.
As a side note you could use a more meaningful and semantic markup
<figure>
<img src="img/linus_torvald.jpg" alt="Linus Torvald smiling face" />
<figcaption>Linus Torvald smiling face</figcaption>
</figure>
I'm getting a border-radius bug on the latest version of Chrome (working properly on Firefox) that lasts the time of an animation that uses opacity on a div from an HTML page [b. html] inserted in another HTML page [a. html] with object.
I tried other solutions (jQuery, Web Components...) without getting what I wanted and I honestly preferred to stay with object for this particular project even though it is an aging technology.
Screenshot
a.html
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<object id="b" data="b.html"></object>
</body>
</html>
b.html
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>Hi, how are you?</div>
</body>
</html>
style.css
* { margin: 0; padding: 0; }
body { background: blue; }
#b {
width: 400px;
height: 400px;
border: 10px solid black;
border-radius: 40px;
overflow: hidden;
}
div {
height: 400px;
background: white;
text-align: center;
animation: ani 2s forwards;
}
#keyframes ani {
0% { opacity: 0; }
100% { opacity: 1; }
}
Thanks for your help!
Just as example, here is the jQuery version I found [a.html]
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(){
$("#b").load("b.html");
});
</script>
</head>
<body>
<div id="b"></div>
</body>
</html>
So I am using brackets to code and I am very new to programming I put a div element around my image so I could edit it in css but for some reason the width and heights are not changing
h1 {
width: 300px;
margin:400px auto;
color: red;
font-family:Impact ;
}
.character{
width:45px;
height:45px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mainc.css">
<script src="javascript.js"></script>
</head>
<body>
<h1>
So I am just testing out stuff on here
</h1>
<div class: "character">
<img src="C:/Users/Nick Malone/Desktop/Downloads/block.jpg">
</div>
</body>
</html>
<div class: "character"> is a wrong notation to assign a class to a div. Try it as <div class="character">
You need to update your css to target the image. See below.
.character img{
width:45px;
height:45px;
}
h1 {
width: 300px;
margin:400px auto;
color: red;
font-family:Impact ;
}
img{
width:45px;
height:45px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mainc.css">
<script src="javascript.js"></script>
</head>
<body>
<h1>
So I am just testing out stuff on here
</h1>
<div class= "character">
<img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg">
</div>
</body>
</html>
Try this
. character img{
width:100px;
height:100px;
display:block;
}
You need to give the width and the height to the image not the div.
h1 {
width: 300px;
margin:400px auto;
color: red;
font-family:Impact ;
}
#character{
width:45px;
height:45px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mainc.css">
<script src="javascript.js"></script>
</head>
<body>
<h1>
So I am just testing out stuff on here
</h1>
<div>
<img src="C:/Users/Nick Malone/Desktop/Downloads/block.jpg" id="character">
</div>
</body>
</html>
I am teaching myself css and html and I created a stylesheet and broke it up into different elements (background image, cursors, etc). I am referencing the entire css file in the main html file but when I run the application I get a blank screen. What am I missing? Here is my code. First, the stylesheet
html, body
{
overflow: auto;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#background
{
background-image: url("../Assets/Graphics/background.jpg");
background-color: #cccccc;
background-size: 100% 100%;
background-repeat: no-repeat;
opacity: 0.5;
}
#mycursor
{
cursor: url(../Assets/Graphics/cursor.cur), auto;
}
And now the html file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Destiny Saga</title>
<link rel="stylesheet" type="text/css" href="Style/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="Assets/Graphics/title.ico" />
</head>
<body>
</body>
</html>
Here is what you probably meant:
html, body {
overflow: auto;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#background {<--It is Bad to name an ID background... you probably want to just do div here...-->
background-image: url("../Assets/Graphics/background.jpg");
background-color: #cccccc;
background-size: 100% 100%;
background-repeat: no-repeat;
opacity: 0.5;
}
#mycursor { <---you could just add cursor to the above so that it will be like that in the above div-->
cursor: url(../Assets/Graphics/cursor.cur), auto;
}
And now the html file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="Style/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="./Assets/Graphics/title.ico" />
</head>
<body>
<div id="background">
<h1> Hello World</h1>
<div id="mycursor">
</div>
</div>
<script type="text/javascript" src="./Javascript/Main.js"></script>
</body>
</html>
Things that are certainly wrong:
The img element is missing a src attribute
The #mycursor selector matches an element with id="mycursor" and you have id="#mycursor"
The #background ruleset doesn't match any element
You might have other issues (such as incorrect URLs).
In short, there is nothing in your HTML that should create a visible effect, and none of the styles that apply to it will change that.
Change:
<img id="#mycursor">
to:
<img id="mycursor">
In css you use # for ids, but in html you dont have to write the #