How to make hover effects for an image?
code sample:
img:hover {
background: X;
color: X
}
<li class="navDash">
<img class="dashImg" width="200" src="https://openclipart.org/image/800px/170531" alt=""> Dashboard
</li>
how about this?
src : CSS hover effect for PNG images
enter code here
.navLi img {
opacity: 0.3;
}
.img:hover {
opacity: 1;
}
You need to apply the styles to the parent element .navDash:
.navDash:hover {
background: blue;
color: white;
}
<li class="navDash">
<img class="dashImg" width="200" src="https://openclipart.org/image/800px/170531" alt=""> Dashboard
</li>
If you want to only affect the image then you should wrap it with it's own parent div:
.dashImgWrapper {
display: inline-block;
}
.dashImgWrapper:hover {
background: blue;
color: white;
}
<li class="navDash">
<div class="dashImgWrapper">
<img class="dashImg" width="200" src="https://openclipart.org/image/800px/170531" alt="">
</div>
Dashboard
</li>
Elaborating on j08691's comment, the thing is, for an <img> element, the color and background properties don't have any effect on it, that's because the <img> element only displays the image given to it. Thus, even though these properties are applied on the <img> tag on hover, they have no effect on it.
Other properties that affect the <img> tag like height will show its effect on hover.
Based on what you wanted, here's the code that will give you the desired outcome:
<!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>ITC-SaaS Kit</title>
<link rel="stylesheet" href="/new.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<style type="text/css">
.navLi:hover{
background: #16251217;
color: #90A0B7;
}
/*On hover, the image will dissappear and the span will take the required color.*/
.navLi img:hover {opacity: 0;}
.navLi span:hover {background-color: blue; display:inline-block;}
</style>
</head>
<body>
<div class="side-bar">
<h3 class="nav-header">Saas Kit</h3>
<ul class="navUl">
<li class="side1"><b>Sierra Ferguson</b></li>
<span class="side2">s.ferguson#gmail.com</span>
<span id="side1-2"><img src="" alt=""></span>
<li class="navDash"><img class="dashImg" src="./imgs/Vector.png" alt=""> Dashboard</li>
<!--Put all <img> tags inside a <span> tag.-->
<li class="navLi"><span><img src="./imgs/Tasks.png" alt="tasks"></span></li>
<li class="navLi"><span><img src="./imgs/Email.png" alt="email"></span></li>
<li class="navLi"><span><img src="./imgs/Contacts.png" alt="contacts"></div></li>
<li class="navLi"><span><img src="./imgs/Chat.png" alt=""></span></li>
<li class="navLi"><span><img src="./imgs/Deals.png" alt=""></span></li>
<!-- <li class="navLi">toggle</li> -->
<li></li>
</ul>
</div>
<div class="main-content">
<div class="nav">asdasd</div>
<div class="tasks">
<div class="left-side">
<div class="top-left">
<ul class="date">
<li>Monday</li>
<li>monday</li>
<li>monday</li>
<li>monday</li>
<li>monday</li>
<li>monday</li>
<li>monday</li>
</ul>
</div>
<div class="bottom-left">adasd</div>
</div>
<div class="right-side">asda</div>
</div>
</div>
</body>
</html>
Here, we have put all the <img> elements inside a <span> element. So, whenever the user hovers on the image, the image will become transparent (or disappear) and that span tag will take the color you want it to.
Try this:
img:hover {
border: 3px solid black;
}
Related
I'm following a tutorial online but I can't my HTML code to CSS (nothing happens when I change the details in css file. I have both files placed in the same folder. My CSS is in style.less file
Since I only starting with this, I think maybe the problem is in the syntax but I can't figure out what it is exactly
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>1st project</title>
<link rel="stylesheet" href="./reset.css"/>
<link rel="stylesheet" href="./style.css"/>
<link rel="stylesheet/less" type="text/css" href="style.less"/>
</head>
<body>
<div class="top">
<div class="top_content">
<img src="/base/materials/4.png"/>
<div>
<h3>Web Development Course</h3>
<span> Learn to code with basic paths</span>
<button>Browse course</button>
</div>
</div>
</div>
<div class="top_sub-content">
<nav>
<ul>
<li>Home</li>
<li>Careers</li>
<li>Blog</li>
</ul>
</nav>
<img src="/base/materials/5.jpg"/>
</div>
<footer>
<div>
<img src="/base/materials/4.png"/>
<h3>Join the list</h3>
<span>Sign up for the list</span>
</div>
<div>
<div>
<input placeholder="Enter your email"/>
<button>Subscribe</button>
</div>
<span>We won't spam</span>
</div>
</footer>
</body>
</html>
CSS
body {
width: 100%;
height: 100%;
}
.top {
display: flex;
.top_content {
flex: 1;
}
.top_sub-content {
background: #33A3EF;
flex-basis: 40%;
img {
max-width: 100%;
}
}
}
If both files are in the same location, remove the dot and slash from the beginning of the link
Before
<link rel="stylesheet" href="./style.css"/>
After
<link rel="stylesheet" href="style.css"/>
I have an anchor tag Home this displays homepage and another one Books this display books page. Now when I click on Home link I want it to change it's color and keep the same color until I click on the other link. Similarly, when I click on Books link I want it to change this color and keep the same color until I click other link.
I can do it using JavaScript but I want to know how I can achieve it using CSS only?
I tried with a:active but it doesn't work.
<!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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Literata:opsz,wght#7..72,300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Bookstore</title>
</head>
<body>
<div class="container">
<ul>
<li>Home</li>
<li>Books</li>
</ul>
</div>
</body>
</html>
You can do it like that, Use focus, But if using only that the styling will be lost once another element gains focus, So add a class to your a like in my example link then use it in CSS like the demo below:
a {
color: black;
text-decoration: none;
font-size: 20px;
}
a:focus {
color: red;
}
:link {
color: red;
}
<!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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Literata:opsz,wght#7..72,300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Bookstore</title>
</head>
<body>
<div class="container">
<ul>
<li>Home</li>
<li>Books</li>
</ul>
</div>
</body>
</html>
HTML code
<a tabindex="1">Your Button</a>
CSS code
a {
color: black;
font-size: 30px;
}
a:active {
color: rebeccapurple;
}
a[tabindex]:focus {
color:rebeccapurple;
}
Adding a tabindex to each anchor element allows you to apply a :focus pseudo-class:
<style>
ul li a {
color: #000;
}
ul li a:focus {
color: red;
}
ul li a:selected {
color: red;
}
</style>
<ul>
<li><a tabindex="1" href="#" class="selected"> item1 </a></li>
<li><a tabindex="1" href="#" class="selected"> item2 </a></li>
<li><a tabindex="1" href="#" class="selected"> item3 </a></li>
</ul
I am new to html and css, I just desined sample website on xd adobe. image of it is attached. The html works but when I am working on the css part is not workink, I does not shown on the website. I am coding at a scss file and not css file. I will appreciate any help! You can see I wrote on the css file that the logo should be without underLine but still its not working
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap");
body {
background: #F2F2F2;
font-family: 'Poppins';
margin: 0;
}
.navbar {
background: white;
padding: 1em;
.logo2 {
text-decoration: none;
font-weight: bold;
color: black;
font-size: 10em;
}
}
.container {
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JustFly</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar">
<div class="container">
<a class="logo2" href="#">JustFly</a>
<img id="mobile-cta" class="mobile-menu" src="images/menu.svg" alt="Hamburger Menu">
<nav>
<img id="mobile-exit" class="mobile-menu-exit" src="images/exit.svg" alt="Hamburger Menu">
<ul class="primary-nav">
<li class="current"> Home </li>
<li> FAQ </li>
<li> Pricing </li>
</ul>
<ul class="secondary-nav">
<li> Contact </li>
<li class="GoPremiumBtn">Buy Now </li>
</ul>
</nav>
</div>
</div>
<section class="hero">
<div class="container">
<div class="col">
<h1 class="head">Fly Like Never Before.</h1>
</div>
<img id="mainImage" class="mainImage" src="images/icons8-fighter-jet-96.png" alt="Fighet Plane Image">
</div>
</section>
</body>
</html>
Design in XD :
Code Image:
Output:
Try a.logo2:link, a:logo2:visited as a selector for that CSS rule. That should be more specific than the browser default a:link and a:visited and overrule them.
im making a website from scratch for the first time, i am formally educated on html but not css
pls explain heres my html
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" type="icon" href="favicon.ico">
<title>Jinuine Design | Home</title>
</head>
<div class="header">
<div class="logo">
<img src="imgs/JinuineFavicon.png">
</div>
<div class="home">
<a href="index.html" class="homelink">
<h1 class="homebutt">Home</h1>
</a>
</div>
</div>
heres my css
.header {
height: 100px;
background: black;
}
.homebutt {
color: black;
padding-top: 50px;
padding-right: 110px;
}
someone please explain how to get the effect i want this is what it looks like
ss of my page
You need to set the style to .logo, not .header
.logo {
height: 100px;
background: black;
}
.homebutt {
color: black;
padding-top: 50px;
padding-right: 110px;
margin: 0;
}
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" type="icon" href="favicon.ico">
<title>Jinuine Design | Home</title>
</head>
<div class="header">
<div class="logo">
<img src="imgs/JinuineFavicon.png">
</div>
<div class="home">
<a href="index.html" class="homelink">
<h1 class="homebutt">Home</h1>
</a>
</div>
</div>
Please remove padding on button.
The CSS padding properties are used to generate space around an element's content, inside of any defined borders.
With CSS, you have full control over the padding. There are properties
for setting the padding for each side of an element (top, right,
bottom, and left).
Need some help getting my background image to display on my page.
I'm having trouble getting it to work and I can't figure out why because to me it seems like I spelled everything correctly. Any help would be appreciated.
HTML
'<html>
<head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="CSS/style.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<div class="pageOne">
</div>
<body>
<ul class = "nav nav-pills">
<li>
Daniel Collins
</li>
<li class="pull-right">
Contact Me
</li>
<li class="pull-right">
Portfolio
</li>
<li class="pull-right">
About Me
</li>
</ul>
</body>
</html>'
CSS
'body{
background-color: white;
}
.nav-pills{
font-family:Orbitron;
font-size: 1.7em;
background-color: black;
};
.pageOne{
background: url("../images/mountains.jpg");
};'
Your <div> is empty, which means that it is 0px tall (there needs to be some content to force it to "expand"). Try setting the height explicitly in your CSS.
.pageOne {
height: 100px; /* or whatever height you want */
background: url("../images/mountains.jpg");
};'
.pageOne is an empty div. Your current content is in your <body> tags. If you put the background on your body instead, it would appear. A div shouldn't be outside the body tag anyways. If you leave your div outside of the body, it could render faulty.
Checkout this example
You made several mistakes in your html and css
pageOne is empty put some content in it or you can give height of that div from css
don't add ; semicolon like this .pageOne{}; remain part of css will not execute
Hope this will helps you
body{
background-color: white;
}
.nav-pills{
font-family:Orbitron;
font-size: 1.7em;
background-color: black;
}
.pageOne{
background: url("http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1-600x319.gif");
background-repeat: none;
background-size: cover;
display: inline-block;
height: 100px;
width: 100%;
text-align: center;
}
<html>
<head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="CSS/style.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<div class="pageOne">
hi
</div>
<body>
<ul class = "nav nav-pills">
<li>
Daniel Collins
</li>
<li class="pull-right">
Contact Me
</li>
<li class="pull-right">
Portfolio
</li>
<li class="pull-right">
About Me
</li>
</ul>
</body>
</html>