I'd actually want to change an image when someone hovers the mouse over the image.
Lets say I have an image:
<img src="image.png"/>
I want to change it with the following effects on hover:
The image should be clickable, so it should be a link which redirect users to another page
The image's background should be black-ish, with opacity
On the image it should appear an other image in the middle
How is it possible to do it?
I suggest that you create a link <a class="my-image">foo</a> and use css to get the rollover effect. CSS rollover tutorials are easy to find with a google search and this solution would be the most elegant, semantic and seo friendly you could achieve- without using javascript.
example code from http://css-tricks.com/snippets/css/basic-link-rollover-as-css-sprite/
a {
display: block;
background: url(sprite.png) no-repeat;
height: 30px;
width: 250px;
}
a:hover {
background-position: 0 -30px;
}
you can make it like this:
<a class="superimage" href="http://yourlink.com"></a>
and the CSS:
.superimage {
background-image: url(superimage.jpg) no-repeat 0 0;
display: block; //or inline-block
height: (image height)px;
width: (image width)px;
opacity: 0.8;
}
.superimage:hover {
background-image: url(superimageonhover.jpg) no-repeat 0 0;
display: block; //or inline-block
height: (image height)px;
width: (image width)px;
}
more help? just ask
Related
I'm creating a drop-down menu or list (don't know so much the difference) and I want to make it the way that when someone chooses the content that he wants to see and click on the image, the background of the image change color until he will change the content of the page when he will eventually click to other images to select the content. I will now paste some image here to let you see what i intend. system is the same color as the background
now that the page is showing the content of system the color changed, and even if the user will click on something else inherent to the content, the color will not change
Sincerely I really don't know what code can help me with this, be it CSS or javascript. I do not pretend that you answer me exactly like you were workers and your boss, certainly not, even simple advice on where to direct me would be fine.
{
.system-rectangle{
top: 180px;
left: 0px;
width: 120px;
height: 120px;
background: #405D6C 0% 0% no-repeat padding-box;
opacity: 1;
}
.system-image{
top: 194px;
left: 25px;
width: 70px;
height: 56px;
opacity: 1;
}
.system-text{
top: 260px;
left: 0px;
width: 119px;
height: 26px;
text-align: center;
font: Regular 16px/21px Oswald;
letter-spacing: 0;
color: #FFFFFF;
opacity: 1;
}
This are the information about the system rectangle background, the image and the text. If you are questioning why the image do not have "background" is because i delete it since it have personal information.
I suppose that you want a html, css and js solution.
You can give the list items an active class and then in css you will be able to give it a different background. With JavaScript you can change the class of the item to active when it is clicked.
HTML:
<nav>
<ul>
<li class="system-rectangle active" onclick="changeActive(this)">System</li>
<li class="system-rectangle" onclick="changeActive(this)">Troubleshooting</li>
<li class="system-rectangle" onclick="changeActive(this)">Other</li>
</ul>
</nav>
CSS:
.system-rectangle{
top: 180px;
left: 0px;
width: 120px;
height: 120px;
background: #405D6C 0% 0% no-repeat padding-box;
opacity: 1;
}
.active{
background-color: lightblue;
}
JS:
function changeActive(elem){
document.getElementsByClassName("active")[0].classList.remove('active');
elem.classList.add('active');
}
This is just an example. This code could be written better, but If you provide your code then it is easier to give an actual example.
You can see the code in action: Codepen
I am unsure of why I cannot get a background-image to appear in the following snippet. The url is correct and I have set size to the image. Also, how can you align a background-image in the center of a page? I know there are properties like right top, but I do not see one for center vertically and horizontally.
Thanks.
$("#arrow-icon").slideToggle(1000);
.arrow {
height: 400px;
width: 100%;
background-color: blue;
text-align: center;
}
#arrow-icon {
padding-top: 100px;
display: none;
background-image: url("http://optimumwebdesigns.com/icons/down-arrow.ico");
background-repeat: no-repeat;
height: 50px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="arrow">
<div id="arrow-icon">
<!-- <img src="http://optimumwebdesigns.com/icons/down-arrow.ico"> -->
</div>
</div>
The problem is that the div is smaller that the picture.
You can get around this with the background-size property
Example:
#arrow-icon {
padding-top: 100px;
display: none;
background-image: url("http://optimumwebdesigns.com/icons/down-arrow.ico");
background-repeat: no-repeat;
height: 50px;
width: 50px;
background-size:100% 100%;
}
fiddle - https://fiddle.jshell.net/800modgt/
Or you can change the div width and height to the image width and height...
And in terms of centering, simply use:
background-position: center;
That said, I'm noticing that it's not center on the page on the Fiddle previously posts. You can use
margin:auto;
to center a <div> horizontally
You might consider for the positioning using CSS3 for positioning, as it's very versatile in changing position of a div and how far it slides out. Here is a JSFiddle. It's for side animation, but it will work for just a standard up/down, too.
https://jsbin.com/yovaqo/edit?html,css,js,output
I was wondering if there is a way to make the hover area bigger than the image?
For example, I have an image that is 72px x 61px and when I hover over it, it changes to a different image. What I would like to know is if I can hover outside the image but still trigger the change in the image.
Sorry if this is confusing, I tried to post an image but since I just signed up I am not able to.
This is a working example, just hover in the gray colored region
.outer {
border: 1px solid;
padding: 60px;
width: 300px;
background-color: #ddd;
}
.outer:hover>img {
content: url('http://docs.gimp.org/en/images/filters/examples/color-taj-sample-colorize.jpg');
}
<div class="outer">
<img src="http://goo.gl/7VYJyX" />
</div>
Yes. Put it in a container (<div>, <a>, whatever), add padding to the container (to increase the area).
If what you're doing is in JS, attach the hover handler to the container instead of the image.
If you're doing CSS, something like this should be helpful:
.container:hover img{
/* styles for img when .container is hovered*/
}
Is this what you are going for. her is my fiddle https://jsfiddle.net/pdjoh1dy/1/
HTML
<div id="hover-example">
<div id="img-holder">
</div>
</div>
CSS
#hover-example{width: 500px; height: 500px; border-style: solid;}
#img-holder{margin: 25%; width: 50%; height: 50%; background-color: blue;}
#hover-example:hover > #img-holder{
background-color: red;
margin: 10%;
width: 80%;
height: 80%;
}
You could also set the image to display: block and add padding, if it does not mess with your layout.
I've got a page using a background-image.
background-size is set to cover.
The content is just a heading and two buttons.
I want the div to be always the proportional height fitting to the background.
What's the best way to do this (if possible with pure CSS)?
You can use one same image file for both background and inline, and set the inline image to visibility: hidden; (keep space), so the div can automatically resize based on the image size.
There is no way to detect the background image size with CSS.
.container {
background: url("https://picsum.photos/600/150?image=0") 0 0 no-repeat;
background-size: cover;
position: relative;
border: 1px solid red;
overflow: hidden;
}
.image {
visibility: hidden;
}
.title {
position: absolute;
width: 100%;
background: rgba(255, 255, 255, .5)
}
<div class="container">
<div class="title">Hello</div>
<img class="image" src="https://picsum.photos/600/150?image=0">
</div>
know this is old thread but stumbled upon it.
the following works for me if i know the dimensions of the image,
eg. 1220x404 => 1220/404 = 3.01980198 = 30.1980198
header { max-height: 404px; height: 30.1980198vw; }
In this fiddle http://jsfiddle.net/36Fmh/36/ I'm overlaying an image with text :
The image contains two states : a non-hover state and hover state :
How can the css be updated so that just the hover state is displayed ?
I can use jQuery to update the css to the required state on hover but im not sure what the css should be. I think I need to change the background-position attribute ?
Fiddle & code :
http://jsfiddle.net/36Fmh/36/
.qp_divSelect {
cursor: pointer;
width: 960px;
height: 240px;
background: url('http://i.imgur.com/83LeFIa.png') no - repeat;
background - position: 0px - 25px;
display: inline - block;
}
<div id="testId">
<span class="qp_divSelect" style="color: #408800;" href="javascript:void(0)" onclick="alert('here')">
<span style="position: absolute;font-weight: bold;color: white;padding-left: 22px;padding-top: 10px;font-size: 13px;top: -0px;padding-left: 22px;">Add</span>
</span>
</div>
You have to change background-position on pseudoclass :hover.
.qp_divSelect:hover {
background-position: 0 0;
}
Here my fiddle: http://jsfiddle.net/36Fmh/37/ (I had to adjust the width and height of the div).
Edit
I think I misunderstood your question. Is a possible solution for you to apply the sprite for the inner span?
E.g.: http://jsfiddle.net/36Fmh/38/
Use :hover pseudo-selector.
.qp_divSelect:hover {
cursor: pointer;
width: 960px;
height: 240px;
background: url('http://i.imgur.com/hoveres-background.png') no-repeat;
background-position: 0px -25px;
display: inline-block;
}
Here is no jQuery needs.