This never happened to me before, and i can't figure our why the hover happens, but the back image won't change :
<div class="settings" id="settings" style="background-image:url(assets/settings.svg);"></div>
.settings{
width: 2.0vw;
height: 2.0vw;
margin-top: calc((8vh - 2vw)/2);
margin-left: 1.5vw;
float: left;
background-position: center;
background-size: contain;
}
.settings:hover{
background-image: url("assets/settingsH.svg");
}
To prove that the image is there, if i set assets/settingsH.svg in the html - it will show the hover image.
If i change size on hover, it will also work (hover is happening) but back image won't change no matter what.
No other hidden settings class was found.
That's because you put the background image inline with html, so if you want to replace it via css, you must put an !important:
.settings:hover{
background-image: url("assets/settingsH.svg")!important;
}
or bettter, put the background in css:
.settings {
width: 2.0vw;
height: 2.0vw;
margin-top: calc((8vh - 2vw) / 2);
margin-left: 1.5vw;
float: left;
background-position: center;
background-size: contain;
background-image: url("https://via.placeholder.com/400/0000FF");
}
.settings:hover {
background-image: url("https://via.placeholder.com/400/FF0000");
}
<div class="settings" id="settings"></div>
Related
I am having difficulty trying to make the logo at the top of my web page change when I hover over it.
To be more specific, I have a logo at the top of my page, and I created another logo slightly different for when a user hovers over it.
Here is my code:
#top{
width:1366px;
height:100px;
background-color:#1e125b;
}
body{
background-color:white;
background-repeat:repeat;
margin: 0;
}
#top:hover{
background-image: url('Logo_hover.png');
}
The Logo_hover multiplies itself throughout the whole div, instead of simply changing the initial image. I understand that the background-image is not what I should be using for this problem but I cannot seem to find any other solutions.
#top:hover{
background-image: url('Logo_hover.png');
background-repeat: none
}
have you used this.onmouseover & this.onmouseout ?
<img src='your pic' onmouseover="this.src='your pic on mouse over';" onmouseout="this.src='your pic on mouse out';" />
.logo {
background-image: url("http://placehold.it/120x120&text=image1");
background-repeat: no-repeat;
height: 120px;
width: 120px;
}
.logo:hover{
background-image: url("http://placehold.it/120x120&text=image2");
background-repeat: no-repeat;
height: 120px;
width: 120px;
}
<div class="logo"></div>
#top{
background-image: url(logo.png);
background-repeat: no-repeat;
background-size: cover;
overflow:hidden;
width: 120px;
height: 120px;
}
#top:hover{
background-image: url(logo_hover.png);
}
So basically I want my p tag to always be displayed under my background image. If I make my window smaller, the p tag should not overlap the background-image.
I know adding it in the source code as a img in a separate div would help a lot, but an answer for this would be nice.
HTML:
<div class="champ-link img-background">
<a>
<p>browse the selection</p>
</a>
</div>
CSS:
.img-background {
background-image: url(test.jpg);
background-repeat: no-repeat;
background-size: 50px 63px;
}
.img-background {
background-image: url(test.jpg);
background-repeat: no-repeat;
background-size: 50px 63px;
padding-top: 63px;
}
or
p {
margin-top: 63px;
}
Just took the p tag out of the div to allow the p tag positioning.
<div class="champ-link img-background">
</div>
<a><p>browse the selection</p></a>
css:
img-background {
background-image: url(test.jpg);
background-repeat: no-repeat;
height: 10%;
background-position: center;
}
never overlaps the div.
Here is an alternative approach negating the need for padding or margin to "make space" for the image size, for instance if you want to scale your image size to your screen size
<div class="champ-link">
<div class='img-background'>
</div>
<a><p>browse the selection</p></a>
</div>
CSS
.img-background {
background-image: url(test.jpg);
background-repeat: no-repeat;
background-size: 100%; /* or cover or contain etc. */
display: block;
margin:auto; /* can add optional margin for top bottom too
so image doesn't "touch" anchor below it */
width: 50px; /* or whatever you want/need */
height: 63px; /* or whatever you want/need */
}
my code in css is:
.logo{
content:url(http://www.dylionsrugby.com.au/wp-content/uploads/2012/04/lion.png/600x600);
background-color: White;
float: right;
}
and in html I have:
<div class="logo"></div>
Am I missing something, nothing appears?`
Your question is somewhat general. You could also simulate the right positioning using positioning property on the image and not on the div.
.logo{
width: 250px;
height: 75px;
background-image: url("http://www.slate.com/content/dam/slate/articles/health_and_science/science/2015/07/150730_SCI_Cecil_lion.jpg.CROP.promo-xlarge2.jpg");
background-color: white;
background-repeat: no-repeat;
background-size: 100% 100%;
float: right;
}
<div class="logo"></div>
First of all, the "content" property is used for :before and :after pseudo-elements. Second, the link to the image is incorrect. I assume that you want the picture inside the div .logo with a white background so here is a jsfiddle: https://jsfiddle.net/Iulius90/njne5sy5/
code:
.logo {
background: white url(http://www.dylionsrugby.com.au/wp-content/uploads/2012/04/lion.png) no-repeat center;
background-size: cover;
float: right;
width: 200px;
height: 200px;
}
I currently have my navbar set to change the image of navbar items when a user hovers over them, but I also want it to change an image from its default to that hovered image when a user clicks on that image and is sent over to another page. I'm trying to do this with the active property, but it doesn't seem to be working.
HTML:
<a href="index.html" >
<div class="navbar-image" id="navbar-image-ID2Games">
</div>
<br>
<div class="navbar-text">
ID2 Games
</div>
</a>
CSS:
#navbar-image-ID2Games {
margin: 0 auto;
width: 3.5rem;
height: 3.5rem;
background-repeat: no-repeat;
background: url(http://i.imgur.com/Ou5cX4D.png);
background-size: contain;
}
#navbar-image-ID2Games:hover {
margin: 0 auto;
width: 3.5rem;
height: 3.5rem;
background: url(http://i.imgur.com/Tx0SVZr.png) no-repeat;
background-size: contain;
}
#navbar-image-ID2Games:active {
margin: 0 auto;
width: 3.5rem;
height: 3.5rem;
background: url(http://i.imgur.com/Tx0SVZr.png) no-repeat;
background-size: contain;
}
JSFiddle to give you an idea: https://jsfiddle.net/y1yv54qu/1/
what about a jquery solution?
<div class="navbar-image original"></div>
CSS
.navbar-image {
background-repeat:no-repeat;
background-size:cover;
background-position:center;
display:block;
width: 3.5rem;
height: 3.5rem;
}
.navbar-image:hover {
background-image:url(http://i.imgur.com/Tx0SVZr.png);
}
.original{
background-image:url(http://i.imgur.com/Ou5cX4D.png);
}
.new-nav{
background-image:url(http://i.imgur.com/Tx0SVZr.png);
}
Jquery
$('.navbar-image').on({
click: function(){
$(this).addClass('new-nav').removeClass('original');
}
});
Demo
http://jsfiddle.net/sandiiev/ee293mbo/
You can use :focus to have something similar behaviour as click event.
To make this work, you need to use tabindex attribute. For example,
<div class="navbar-image" id="navbar-image-ID2Games" tabindex="0">
</div>
Then in CSS:
#navbar-image-ID2Games:focus {
background: url(http://i.imgur.com/Tx0SVZr.png) no-repeat;
outline: none; /* to remove default outline for focus elements */
/* other styles */
}
see the image ...
To understand ;P
this is the code i use
.img1 {
background-image: url('img1.png');
width: 381px;
height: 187px;
background-repeat: no-repeat;
float: left;}
.img1:hover {
background-image: url('imghover.png');
width: 381px;
height: 115px;
background-repeat: no-repeat;
}
but it is affecting the img1
I want it to appear above the img1 without affecting on it
i fix it sorry
see this is example
https://dl.dropbox.com/u/35904623/css.gif
+
another one
https://dl.dropbox.com/u/35904623/css2.gif
On hover you are setting height as 381px and margin-top as -116px
height: 381px;
margin-top: -116px;
Which can affect the image 1.