I'm working with a list of links that reveal an image when hovered.
However when the image is revealed and subsequently hidden a line break is left. Is there any way to avoid this?
Here are some images to show the exact problem:
Before: http://i38.photobucket.com/albums/e126/aaron123456/Screenshot2011-11-10at155956.png
After the images are revealed: http://i38.photobucket.com/albums/e126/aaron123456/Screenshot2011-11-10at160023.png
I'm pretty new to coding, any help you can give would be great.
thanks!
Try this: http://jsfiddle.net/csPw2/
html
<span id="hover_img">Hover!<img src="http://www.google.de/images/srpr/logo3w.png" alt="image" /></span>
<br />
Link1<br />
Link1<br />
...
css
#hover_img img {
display: none;
}
#hover_img:hover img {
display: block;
}
#hover_img:hover + br {
display:none;
}
Related
I have a scenario in which I have a team page with pictures and some blurb. Under each picture I have social media links much like the following:
These are images that sit within a horizontal list underneath each item using the below base markup.
<ul>
<li>
<a><img src=""/></a>
</li>
<li>
<a><img src=""/></a>
</li>
</ul>
At the moment these are images but I would very much like if when hovered the grey inards of these images turned blue.
I was thinking just have a span with a background image like this:
<a><span class="linkedin"></span></a>
.linkedin{
height:28px;
width:auto;
background-image:url(link/to/the/linkedin/picture)
}
.linkedin:hover{
height:28px;
width:auto;
background-image:url(link/to/the/linkedin/picture-blue-version)
}
However, when I attempted this the space was empty instead of taking the size of the image.
If I enter as content I get a small part of the background image, furthermore giving the class an absolute position takes it out of document flos
Is this the ideal approach?
The problem is if you use a <span> element you need to set it to display: inline-block and you need to set a width for the image to show up. Then it works, here is a demo:
.linkedin {
display: inline-block;
width: 140px;
height:100px;
background-image:url(http://ipsumimage.appspot.com/140x100,ff7700)
}
.linkedin:hover {
background-image:url(http://ipsumimage.appspot.com/140x100,0000FF)
}
<span class="linkedin"></span>
As you see on the first :hover it flickers. Cause it will not load the image bevore you :hover the first time. This is why you should consider another solution. Like mentioned in some comments you could use http://fontawesome.io/icons/ and then just change the color.
To prevent flickering you could do the same with using <img> tags then the source will be loaded and ready to be shown on :hover. But it works best with also setting positions, demo like so:
a.special {
position: relative;
}
a.special img {
visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
a.special img:first-child {
visibility: visible;
}
a.special:hover img:first-child {
visibility: hidden;
}
a.special:hover img:last-child {
visibility: visible;
}
<a class="special" href="#">
<img src="http://ipsumimage.appspot.com/140x100,ff7700">
<img src="http://ipsumimage.appspot.com/140x100,0000FF">
</a>
Best approach for this is to use SVG's and change the fill of the SVG on hover.
Your approach should work however, it might be that you've not got the correct size image? try 'background-size: cover;' Or that the element has no width. Try setting a width on the span too. (don't forget to give it 'display: inline-block;' too.
Ed: checkout https://css-tricks.com/lodge/svg/
Font-Awesome is a great idea for what you're trying to achieve. Takes less data to load the page too if you can get away with using text in place of images.
By the way, when using the :hover property there is no need to redefine the width and height of the image... Just redefine the changes you'd like to make.
I have an icon which is actually on my webpage but I still cant see it.
HTML
<i class="iconMan"></i>
CSS
.iconMan{
background-image: url(../../assets/imgs/iconMan.png);
display: block;
}
this is what I get:
The Icon should be next to "Test User" but it's not showing. I already tried adjusting height and width but it didn't work.
Any suggestions what I could do?
for displaying an icon you can move your styling to the ::after or ::before pseudo selectors.
.iconMan {
display: inline-block;
}
.iconMan::before {
content: url(../../assets/imgs/iconMan.png);
}
You have missed quotes
.iconMan{
background-image: url("../../assets/imgs/iconMan.png");
display: block;
}
try to do like this
<img src="/assets/imgs/iconMan.png"
I guess it will work
just put this to your html code
I'm using WordPress Twenty Sixteen theme. I've created a page and now I have inserted 4 images in it. When I open the page, the images are displayed in vertical order, i.e., 1 above other. They aren't assigned display: block property either. I tried display: inline and display: inline-block properties, but they aren't working. These are clearly shown in inspect element, but they don't affect the elements. (Also, float: left works perfectly, but I want display: inline to work).
What is the problem and how can I solve it?
Here's the text written in the page:
<div id="gal-1">
<img src="http://localhost/microsoft/wp-content/themes/twentysixteen/images/surface.jpg" alt="" />
<img src="http://localhost/microsoft/wp-content/themes/twentysixteen/images/lumia.jpg" alt="" />
<img src="http://localhost/microsoft/wp-content/themes/twentysixteen/images/windows.jpg" alt="" />
<img src="http://localhost/microsoft/wp-content/themes/twentysixteen/images/edge.jpg" alt="" />
</div>
It will work if you use this:
div#gal-1>img {
display:inline;
}
This will match div gal-1 child when it is an img.
Use !important if necessary to override any display: block;
please check your code i think there is break line tag which is causing issue if you remove it will display items inline block;
another solution
instead of using display:inline-block you can do like
#gal-1
{
display:flex;
display: -ms-flexbox;
display: -webkit-flex;
}
#gal-1 img
{
display:inline-flex;
}
I have the following label:
<label for="payment_method_new">
New <img src="www.example.com/img.png"/>
</label>
What I would like to do is to only hide the text inside the label, but to display the image.
Any help or guidance is much appreciated.
You can use the visibility style for that.
First have your label's content hidden using hidden or collapse, then show your image using visible:
label[for="payment_method_new"]{
visbility: collapse;
}
label[for="payment_method_new"] img{
visibility: visible;
float: left;
}
JSFiddle
#hidet {
visibility: collapse;
}
#hidet img {
visibility: visible;
}
<label id='hidet' for="payment_method_new">
New
<img src="www.example.com/img.png" />
</label>
Is there any specific purpose of first writing text 'New' within your label and then hiding it?
There could be another way of retaining both image and text in your html code, still not showing the text -
<img src="www.example.com/img.png" alt="New" />
I am new to all of this and wanted to know how to enlarge my image when I hover over it.
So far I have tried this.
<ul class="enlarge">
<li>
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" width="150px" height="100px" alt="St John's" />
<span>
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/03/St-Johns-Pop-up.jpg" />
<br />St John's, Baldock
</span>
</li>
All this does is makes a small image and a large image. I don't know how to use css so if you respond please can it be in HTML code.
Also the HTML code that is coming up in the text box beneath is not what I have written and don't know how to change that.
Thanks for any help in advance.
Sarah
You should really look into CSS or Javascript as otherwise hovering is a near-impossible task. Heres what you can do:
First off, remove the span and use a class to identify the thumbnail.
<ul class="enlarge">
<li>
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" width="150px" height="100px" alt="St John’s" class="thumbnail" />
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/03/St-Johns-Pop-up.jpg" class="large-image" />
<br />St John’s, Baldock
</li>
</ul>
Now add some CSS, don't worry, it's rather simple. What we want to accomplish is that when you hover over the thumbnail, we display the larger image. So on hover, we hide the thumbnail and show the larger image. But since we're hiding the thumbnail, we can't hover on it, so we also want to keep displaying the larger image until our cursor moves away from it entirely.
<style type="text/css">
.enlarge .thumbnail + img {
display: none;
}
/* Hovering over the thumbnail, hide the thumbnail */
.enlarge .thumbnail:hover {
display: none;
}
/* Hovering over the thumbnail, show the large image and keep showing it when hovering over the image */
.enlarge .thumbnail:hover + img,
.enlarge .thumbnail + img:hover {
display: block;
}
</style>
The .enlarge select all elements with class="enlarge", the .thumbnail does the same for the class thumbnail. img selects every image element, and the + in the middle says to select any element that comes directly after the preceding, so the line simply reads: select any img element that comes after a .thumbnail element that is inside a .enlarge element. The :hover seems self-explanatory, but here goes anyway: a : selector is called a pseudo-selector and defines a state or meta element (meta elements are elements you can stylise but aren't really there, like ::before and ::after). Metas usually use a ::. There are other pseudo-states as well, like :active. The style that is defined here will only be invoked when that state is invoked. Its the easiest way to make a hover happen!
You can, however, do this with just one image as well:
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" width="150px" height="100px" alt="St John’s" class="enlarge-image" />
<br />St John’s, Baldock
It simplifies your styling a lot:
<style type="text/css">
.enlarge-image {
width: 150px;
height: auto;
}
/* Show full size on hover */
.enlarge-image:hover {
/* This can be any size you want it to be as well. */
width: auto;
}
</style>
A couple of notes on your code: first off, be aware you have typographic quotes (” compared to regular quotes: ") surrounding your image source. This can lead to issues. Second, an image size is always in pixels unless defined in %, so ommit px from your width and height.
.enlarge-image {
width: 50px;
height: auto;
}
.enlarge-image:hover {
width: auto;
}
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" width="150" height="100" alt="St John’s" class="enlarge-image" />
<br />St John’s, Baldock
You should start learning css. It is the only way to fix it.
<head>
<style type="text/css">
.picture{
width : 150px;
height : 100px;
}
.picture:hover{
width : 200px;
height : 150px;
}
</style>
</head>
<ul class="enlarge">
<li>
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" class="picture" alt="St John’s " />
</li>
</ul>
Figured it out, but now it looks rubbish. Anyone know how to hide the other photos when I hover and enlarge one photo as they just move around the larger photo.
That's what I have. I still cant post a photo of what it looks like. Also the last photo when you hover over it it flickers, is this my code or the size of the screen?
Above answer are correct. I am providing you some link which will help you.
http://cssdemos.tupence.co.uk/image-popup.htm
http://jsfiddle.net/4AM3S/