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>
Related
My thing is not working i can't figure out any errors too.As far as i know i tried to separate those mountains and cloud on different level which seems not to be working rather they're sitting beside on their parent element
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="images/icon2.ico">
<title>Farhan Sadiq</title>
</head>
<body class="body">
<div class="top-container">
<img class: "top-cloud" src="images/cloud.png" alt="cloud-img">
<h1>Farhan Sadiq</h1>
<p><span class="underline">WebDevloper</span> and <span class="underline">GameDevloper</span></p>
<img class: "bottom-cloud" src="images/cloud.png" alt="cloud-img">
<img src="images/mountain.png" alt="mountain-img">
</div>
<div class="middle-container">
</div>
<div class="bottom-container">
</div>
</body>
</html>
.body {
margin: 0;
text-align: center;
}
h1 {
margin-top: 0;
}
.top-container {
background-color: #CEE5D0;
}
.middle-container {
background-color: pink;
width: 200px;
height: 200px;
}
.bottom-container {
background-color: yellow;
width: 200px;
height: 200px;
}
.underline {
text-decoration: underline;
}
.bottom-cloud {
position: absolute;
}
you have a typo in the section, the property class uses = instead of : , then what does the output you expect mean, how do you separate it?
There is a typo class in the tag. You have to change the class in this img tag class: "top-cloud" so it looks like this class="top-cloud".
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 1 year ago.
body {
font-family: Avenir;
}
img {
width: 70%;
height: 75%;
float: left;
margin-right: 10px;
cursor: pointer;
}
a {
color: grey;
}
a:hover {
color: black;
}
.title {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>☕️Arrexi's Cafe☕️</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>☕️Arrexi's Cafe☕️</h1>
<div id="body">
<h1 class="title">About Us
<hr>
</h1>
<img src="https://dummyimage.com/600x400/000/fff" alt="Arrexi's Cafe!">
<article id="description">Hello! Welcome to the website of <b>Arrexi's Cafe</b>!<br><br>We are a friendly community which is with many fun bots and an active chat. You can surely chill in our server! Join us now!</article>
<h1 class="title">Feedback</h1>
<hr>
<h3>Have joined our server, and want to give some feedback?</h3>
Enter your suggestion in the following box then press "Submit"!
<br>
<textarea id="feedback"></textarea>
<button onclick="submit()">Submit</button>
</div>
<script src="script.js"></script>
</body>
</html>
I used these HTML codes to try to make a website, but I want the section of the feedback be under the image.
I want the result be
instead of
Can anyone tell me how to do it?
I currently used some <br>s and a character to simulate the result that I want
What youre looking for is a so called clearfix:
What is a clearfix?
Whats happening?
By using float:left youre actually changing the text float - beginning at the point where you set float.
To restore the regular blockish behaviour you need to clear the float again.
body {
font-family: Avenir;
}
img {
width: 70%;
height: 75%;
float: left;
margin-right: 10px;
cursor: pointer;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
a {
color: grey;
}
a:hover {
color: black;
}
.title {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>☕️Arrexi's Cafe☕️</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>☕️Arrexi's Cafe☕️</h1>
<div id="body">
<div class="clearfix">
<h1 class="title">About Us
<hr>
</h1>
<img src="https://dummyimage.com/300x200/000/fff" alt="Arrexi's Cafe!">
<article id="description">Hello! Welcome to the website of <b>Arrexi's Cafe</b>!<br><br>We are a friendly community which is with many fun bots and an active chat. You can surely chill in our server! Join us now!</article>
</div>
<h1 class="title">Feedback</h1>
<hr>
<h3>Have joined our server, and want to give some feedback?</h3>
Enter your suggestion in the following box then press "Submit"!
<br>
<textarea id="feedback"></textarea>
<button onclick="submit()">Submit</button>
</div>
<script src="script.js"></script>
</body>
</html>
I wrapped your whole upper part into a div with the clearfix class.
Inside that div you change the float behaviour by using float:left on the image.
By adding the clearfix to the div, there will be a after Element which sets clear:both which basically restores regular behaviour so everything after that doesnt float anymore.
Fore more information and some live examples see https://www.w3schools.com/css/css_float.asp, https://www.w3schools.com/css/css_float_clear.asp and https://www.w3schools.com/css/css_float_examples.asp.
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 am trying to have an image show up when the user hovers over some text in a span. I have gotten it to work for the user hovering over an entire div, but I just want it to trigger over the span. Here's the full code:
<html>
<head>
<title>gif test</title>
<style>
#gif {
position: absolute;
left: 50px;
top: 120px;
display: none;
}
#trigger:hover #gif {
display: block;
}
</style>
</head>
<body style="font-family:Helvetica;">
<h1>gif test</h1>
<hr noshade />
<p>Hover <span id="trigger">here</span></p>
<div id="gif"><img src="img/hey.gif" /></div>
</body>
</html>
I wanted it to be so that when the user puts their mouse over "here", the image shows, but not if the mouse is over "Hover". Is there something special about spans that prevents hovers from working the same way? Or am I referencing the #gif div incorrectly?
Thanks.
Your CSS is incorrect, #trigger;hover #gif means a child of #trigger:hover with the id gif. Meaning your DOM is supposed to be:
<div id='trigger'>
<div id='gif'><img src='img/hey.gif' /></div>
</div>
If you want to control the state of an element outside the hierarchy, where the controlled element is not a child or a sibling, then CSS isn't enough you need some javascript:
<html>
<head>
<title>gif test</title>
<style>
#gif {
position: absolute;
left: 50px;
top: 120px;
display: none;
}
#gif.show {
display: block;
}
</style>
</head>
<body style="font-family:Helvetica;">
<h1>gif test</h1>
<hr noshade />
<p>Hover <span id="trigger" onmouseover="show()" onmouseout="hide()">here</span></p>
<div id="gif"><img src="img/hey.gif" /></div>
</body>
<script type="text/javascript">
showBox() {
var gifbox = document.getElementById("gif");
gifbox.classList.add("show");
}
hideBox() {
var gifbox = document.getElementById("gif");
gifbox.classList.remove("show");
}
</script>
</html>
Per j08691, I had my hierarchies wrong. New code:
<html>
<head>
<title>gif test</title>
<style>
#gif {
position: absolute;
left: 50px;
top: 120px;
display: none;
}
#trigger:hover + #gif {
display: block;
}
</style>
</head>
<body style="font-family:Helvetica;">
<h1>gif test</h1>
<hr noshade />
<p>Hover <span id="trigger">here</span>
<span id="gif"><img src="img/hey.gif" /></span>
</p>
</body>
</html>
Now, the image is a sibling of #trigger (both have parent <p>; the + is the sibling selector).
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>