I was trying to change an image on my page when i hover over it. I have also seen many examples about this and i'm still unable to make this work. Can anyone please tell me where am i going wrong?
Here is html my code:-
<body>
<a id="swap"> </a>
</body>
css:-
#swap {
background-image:url('slide1.jpg');
}
#swap:hover {
background-image:url('slide2.jpg');
}
This works
#swap {
display: block;
background: url('http://lorempixel.com/output/cats-q-c-100-100-8.jpg') no-repeat;
}
#swap:hover {
background: url('http://lorempixel.com/output/catsq-c-100-100-9.jpg') no-repeat;
}
Try this:
<style type="text/css">
#swap {
display:block;
position:relative;
height:100px;
width: 200px;
background-image: url(slide1.jpg);
background-repeat:no-repeat;
}
#swap:hover {
background-image: url(slide2.jpg);
background-repeat:no-repeat;
}
</style>
<body>
<div id="swap"></div>
</body>
Change width and height to your image dimentions. This solution works, I tested.
Related
I am trying to get a background image in an tag working. I am firstly trying to get a modification of an example I found off the web working but it is not. Code as below:
<html>
<body>
<style>
a {
background-color: blue;
background-image: url("./linkedinlogo.png");
display: block;
height:32px;
width:32px;
}
</style>
</body>
</html>
The background colour displays but not the background image. Edge, chrome, Firefox tried. image and HTML file is same directory. Filename spelling checked and intellisense lists file when ./ is typed.
Tried removing background colour to see if helps but doesn't.
Kind regards,
Tim
It is working as expected. Check this out
a {
background-image: url("https://www.edigitalagency.com.au/wp-content/uploads/Linkedin-logo-icon-png.png");
height:32px;
width:32px;
display: inline-block;
background-size: contain;
}
Add The Following Code:
<html>
<body>
<style>
a {
background-color: blue;
background-image: url("./linkedinlogo.png");
display: block;
height:32px;
width:32px;
}
</style>
<a href="https://pagedart.com">
<img src="imgSrc"></img>
</a>
</body>
</html>
I am working on some side buttons for a project and would like the link the hover styles for both elements, but am not sure how to go about this. In the example below if I highlight the link name (search) it rolls over and changes to a red text and if I highlight the image, it changes to the rollover image as expected. However what I would like to achieve is to link both so when I hover over the icon the link changes to red as well and vice versa.
#linkchoice{
width:100px;
height:100px;
}
#image{
height:75px;
background-image:url(https://i.postimg.cc/P5nvVtPt/search-icon.png);
background-repeat:no-repeat;
background-size:75px 75px;
background-position:center;
}
#linkname{
font-size:15px;
text-align:center;
}
#image:hover{
background-image:url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkname:hover{
color:#EB0307;
}
<div id='linkchoice'>
<div id='image'></div>
<div id='linkname'>Search</div>
</div>
I have made a JSFiddle as well here
https://jsfiddle.net/bzsvgwp8/
Thanks
Just update your css from
#image:hover {
background-image: url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkname:hover {
color: #EB0307;
}
to
#linkchoice:hover #image {
background-image: url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkchoice:hover #linkname {
color: #EB0307;
}
You will see the combined hover effect !
The first solution could be to use the hover on the parent div:
#linkchoice {
width:100px;
height:100px;
}
#image{
height:75px;
background-image:url(https://i.postimg.cc/P5nvVtPt/search-icon.png);
background-repeat:no-repeat;
background-size:75px 75px;
background-position:center;
}
#linkname{
font-size:15px;
text-align:center;
}
#linkchoice:hover #image {
background-image:url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkchoice:hover #linkname {
color:#EB0307;
}
<div id='linkchoice'>
<div id='image'></div>
<div id='linkname'>Search</div>
</div>
in the second solution you can simplify the html using a single div, in this way:
#linkchoice{
width:100px;
height:100px;
}
#linkname{
height:75px;
background-image:url(https://i.postimg.cc/P5nvVtPt/search-icon.png);
background-repeat:no-repeat;
background-size:75px 75px;
background-position:top;
padding-top:75px;
font-size:15px;
text-align:center;
}
#linkname:hover{
background-image:url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
color:#EB0307;
}
<div id='linkchoice'>
<div id='linkname'>Search</div>
</div>
I am having a hard time centering my logo on the center of my header. When displayed correctly it would look like this: "Name" Logo "Surname" .Being the logo at the center, and the "name" and "surname" displaying at both sides of it, "name" on it's left and "surname" on it's right.
(You'll understand better with the picture I'm posting)
Header: logo not centered
So I would like the circled logo to be the center of the header, then have "Pousada" adapt to it at it's right and same with "Team" at it's left.
This is my CSS and HTML:
*{
font-family: 'Oswald', sans-serif;
}
#rafa {
background-color: #000000;
background-repeat:no-repeat;
background-position: 40% 0;
background-size:30%;
color: #fff;
padding: 0.5rem 0 0 0;
border-top:none;
}
#BJJ {
text-align:center;
height: 4rem;
font-weight: normal;
}
.escudo{
text-align:center;
}
.group:after {
content: "";
display: table;
clear: both;
}
#uno {
text-align:center;
vertical-align:middle;
font-size: 2em;
display:inline-block;
}
#dos {
text-align:center;
font-size:2em;
display:inline-block;
vertical-align:middle;
}
img {
max-width: 15%;
clear:both;
display:inline-block;
vertical-align:middle;
}
ul {
color: #000;
list-style: none;
text-align:center;
background: #fff;
border-bottom: solid #000 1.5px;
padding:0;
height: 2.5em;
border-top:none;
}
li {
display:inline-block;
padding: 0 1em;
border-right: 2px;
}
#welcome{
text-align:center;
}
/************ESTILO LINKS*************/
li a {
text-decoration:underline;
color: #000;
}
.Inicio {
color: #fff;
text-decoration:none;
}
/*****************ARTE SOAVE*******************/
/*****************EL EQUIPO*******************/
/*****************LA ESCUELA*******************/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="Treehouse Programación/Recursos/normalize.css" rel="stylesheet">
<link href="estilo.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700|Roboto+Condensed:300" rel="stylesheet">
<title>Pousada Team Brazilian Jiu-Jitsu</title>
</head>
<body>
<header id="rafa">
<a href="Pousada Team.html" class="Inicio">
<h3 id="BJJ">Brazilian Jiu-Jitsu</h3>
<div class="escudo group">
<h3 id="uno">Pousada</h3>
<img src="309011_3565552909659_642031164_n.jpg"/>
<h3 id="dos">Team</h3>
</div>
</a>
</header>
<nav>
<ul>
<li>Arte soave</li>
<li>El Equipo</li>
<li>La Escuela</li>
</ul>
</nav>
<div id="welcome">
<h3>Bienvenido al equipo</h3>
</div>
<div>
</div>
</body>
</html>
I have tried with float, but didn't do well with it. What I have tried here is to use inline-block to have the 3 elements of this header ("Pousada", "logo" and "Team") align.
Any help with this particular problem I have and any content recommendations (or project practices) to fully understand HTML and CSS principles (like layouts and positioning) so I can learn them and move on to more functional aspects like Javascript, will be HUGELY appreciated, you can totally expect any help back that I can provide.
Thanks in advance, and if there's anything I can do to make this place better, please let me know.
Best regards,
Miguel
Here is a quick fix for you:
I have added a background color to the div's to help you identify them.
HTML:
Add your header, add your logo inside the header... then add both the first and the last names inside of the logo div. By adding the names inside of the logo; when ever you move the logo the names will move relative to it.
<div class="Header">
<div class="Logo">
<div class="FirstName">FirstName</div>
<div class="LastName">LastName</div>
</div><!-- End CenterContent -->
</div><!-- End Header -->
CSS:
I use the single line method of writing my css.
You can easily adjust the dimensions of the logo DIV and you can move the names around as needed.
.Header{position:relative; width:100%; height:300px; display:block; float:left; background:SILVER;}
.Logo{position:relative; margin:auto; width:200px; height:200px; background:BLACK;}
.Logo > .FirstName{position:absolute; top:90px; left:-100px; min-width:1em; text-align:center;}
.Logo > .LastName{position:absolute; top:90px; right:-100px; min-width:1em; text-align:center;}
Your Welcome.
I have three link <a> elements with a background but half the link isn't clickable because the background overlaps the text. Does anyone know a solution?
Here is an example of what i've done
<html>
<head>
<style>
li
{ list-style-type:none;
list-style:none;
position:relative;
height:100px;
}
#middle
{ width:350px;
background:url("images/middle.png");
left:405px;
height:250px;
padding-top:50px;
background-size:100%;
}
#left
{ left:275px;
width:240px;
height:150px;
padding:150px 60px 0 0;
background:url("images/left.png");
background-size:100%;
}
#right
{ left:580px;
width:235px;
height:150px;
padding:150px 0 0 70px;
background:url("images/right.png");
background-size:100%;
}
#test
{ height:325px;
}
.Item
{ position:absolute;
font-size:33px;
float:left;
margin:15px;
font-family: Georgia, Times, "Times New Roman", serif;
text-align:center;
}
</style>
</head>
<body>
<ul id="test">
<li id="left" class="Item">I want to<br>have some<br>text here</strong></li>
<li id="middle" class="Item">I want to<br>have some<br>text here</strong></li>
<li id="right" class="Item">I want to<br>have some<br>text here</strong></li>
</ul>
</body>
</html>
Add a Z-Index like that :
#middle
{ width: 350px;
background: url("images/middle.png");
left: 405px;
height: 250px;
padding-top: 50px;
background-size: 100%;
z-index: 2;
}
Maybe you could merge the three pictures into one as shown in the page.Then start your layout using the new merged picture as background-image.When I want to build my website,I always draw a sketch of my website.I will treat the test div as a whole and set a background-image attribute for it.Feel sorry for my pool expression.Hope to solve your question.
Okay so this is a subscription box with fancybox that I'm making and everything is going well.
Just a little problem here.
the image that I'm using is stuck to the left and even margin property is of no use.
<style type="text/css">
body{
background-image:url(../../images/subscribe.png);
background-repeat:no-repeat;
background-position:left bottom;
margin-bottom:85px;
line-height:2px;
margin-left:10px;
margin-right:10px;
}
#h1_1 {
something;
}
#h1_2 {
something;
}
#h1_3 {
something;
}
/*
#img1_1 {
background-position:left bottom;
margin:0px;
background-repeat:no-repeat;
}
*/
</style>
</head>
<body>
<p id="h1_1">
<b>Subscribe Us</b>
<br>
<p id="h1_2"> Sometext</p><!-- end h1_2 -->
<p id="h1_3"> sometext</p><!-- end h1_3 -->
</p> <!-- end h1_1 -->
<!-- <img src="../../images/subscribe.png" id="img1_1"> -->
</body>
</html>
If the margin propety is applied the whole body gets shifted
and if i don't put the image in the background, creatig in the body, this way i can't write the exact text right besides the image.
I think this gets you in the right direction:
if you use the img tag then this should work
#img1_1 {
margin-left: 20px;
}
if you use the background-image you should use background position:
body {
background-position: 20px 20px;
}
No offence, but I recommend you further dive into CSS and HTML, because this is a pretty basic CSS question.