I am trying to use the following technique
http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/
to create a pop up image hover effect that I am dynamically generating with php. I have one problem with this technique that every single image is downloaded when the page loads. How can I have css only download the image on hover.?
Right now css is pushing the images off the screen when the page loads (left: -1000px;) then brings them back into view on hover.Is it possible with css to accomplish this then what other choices do I have?
Instead of setting the img src attribute to the link. Set the attribute data-src with that link. When you hover set the src of the image from the data-src attribute. The browser will load it in then.
HTML Code Here
.gallerycontainer {
position: relative;
}
.thumbnail img {
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover {
background - color: transparent;
}
.thumbnail:hover img {
border: 1px solid blue;
}
.thumbnail span {
position: absolute;
background - color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img {
border - width: 0;
padding: 2px;
}
.thumbnail:hover span {
visibility: visible;
top: 0;
left: 230px;
z-index: 50;
}
<div class="gallerycontainer">
<a href="#thumb" class="thumbnail">
<img width="100px" border="0" height="66px" src="http://www.dynamicdrive.com/cssexamples/media/tree_thumb.jpg"><span><img src="http://www.dynamicdrive.com/cssexamples/media/tree.jpg"><br>Simply beautiful.</span>
</a>
<a href="#thumb" class="thumbnail">
<img width="100px" border="0" height="66px" src="http://www.dynamicdrive.com/cssexamples/media/ocean_thumb.jpg"><span><img src="http://www.dynamicdrive.com/cssexamples/media/ocean.jpg"><br>So real, it's unreal. Or is it?</span>
</a>
<br>
</div>
Take a look at Lazy Loading your images using jQuery: http://www.appelsiini.net/projects/lazyload
Here are some other options: http://www.webresourcesdepot.com/lazy-loading-of-images-resources-you-need/
Related
So I thought it'd be a great idea to add tooltips to my Neocities site, but I seem to have run into an issue I can't find the answer to...
Okay for some ungodly reason my tooltip class isn't working. I assigned my div the class, and the span inside it the tooltiptext class, but it would still just use what I had assigned the body. I only noticed this when the text was still white, when it should've been black, among other things.
Here's the html section:
<h1>please god ignore the background, I haven't found a good one yet</h1>
<img id="A wooden door framed with clip-art of flowers." style="position: relative;" src="images/flowerydoor.png" />
<div class="tooltip">
<p>this is literally copy+pasted from w3schools what the actual fuck-
<span class="tooltiptext">wait a minute this should have black text why isn't the class working</span></p>
</div>
I'm including the header and image parts because I'm desperate and worry the answer lies within one of the miniscule details
here's the stylesheet:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: white;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
body {
background-color: #fbb291;
color: white;
font-family: Verdana;
}
Once again all copy+pasted from w3schools just to make sure it wasn't me
Like I said, the text of the tooltip-assigned div still has white text, and nothing from the tooltip class...
Either the body is overriding my class, or there's something going on with the class itself that's stopping it from working.
I don't know if this helps, but I have assigned a class to my body, which works perfectly fine. I'm wondering if there's something going on with it? I mean, it shouldn't, because I have another page using said class, along with divs using other classes that work perfectly fine!
.door {
margin: 0 auto;
background-image: url("https://64.media.tumblr.com/1adbeafb3ca992a7681ede48ddedcbbd/d5886a952040c00b-9b/s250x400/a917bb1772111a1460eac4922c0502e0ba860bd1.jpg");
/*position: relative;*/
width: 600px;
height: 900px;
text-align: center;
}
I apologize if I'm not making much sense, I'm not super familiar with certain html and css terms.
In this snippet based on your code, the tooltip text is black:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: white;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
body {
background-color: #fbb291;
color: white;
font-family: Verdana;
}
<h1>please god ignore the background, I haven't found a good one yet</h1>
<img id="A wooden door framed with clip-art of flowers." style="position: relative;" src="images/flowerydoor.png" />
<div class="tooltip">
<p>this is literally copy+pasted from w3schools what the actual fuck-
<span class="tooltiptext">wait a minute this should have black text why isn't the class working</span></p>
</div>
If you're using other libraries with their own CSS or are deploying this on a third-party website, there could be a namespace collision. You can check what styles are applying to an HTML element using the Chrome DevTools or similar tools in other browsers. Here is a guide for doing this in Chrome: https://developer.chrome.com/docs/devtools/css/overrides/
How do I get rid of the underline for the image inside the link in SCSS. Could anyone please help?
I created a working example using CodeSandbox
HTML
<p>
<a href="#">
Link
<span>
<img src="imagePath" alt="logo" />
</span>
</a>
</p>
SCSS
a {
text-decoration: none;
&:hover{
border-bottom: 1px solid red
}
}
As yiu can't alter the HTML, this snippet puts the underline on a pseudo element rather than on the actual element. The pseudo element is made to have the same width as the text ('Link') by using that as its content - which is slighly nasty as it means if the text of the Link changes the CSS/SCSS will also have to change.
a {
text-decoration: none;
position: relative;
}
a:hover::before {
content: 'Link';
position: absolute;
top: 0;
left: 0;
width: auto;
height: 100%;
border-bottom: 1px solid red;
z-index: 1;
}
<p>
<a href="#">
Link
<span>
<img src="imagePath" alt="logo" />
</span>
</a>
</p>
Try to put background color on span border-bottom:
body {
font-family: sans-serif;
}
a {
text-decoration: none;
border-bottom: 1px solid transparent;
}
a:hover{
border-bottom: 1px solid red;
}
a:hover span {
border-bottom: 1px solid white;
}
<div id="app">
<p>
<a href="#">
Link
<span>
<img
width="10"
src="https://bitsrc.imgix.net/3b69976526d31a20a1fd238f5a32a704cf437dd6.png"
alt="logo"
/>
</span>
</a>
</p>
</div>
We'll thats tricky and also not the best practices when it comes to frontend buuutt
Since you know the size of the image, you can add a fake border-bottom with the pseudo:after element with width 100% - [width-of-the-element]:
a {
text-decoration: none;
position:relative;
&:before{ // we initialize it before showing to avoid creating elements on interaction
position:absolute;
content:'';
left:0;
bottom:-2px;
border-bottom:1px solid red;
width:calc(100% - 10px - 0.2em); // the image is 10px and the space bar is ~0.2em
display:block;
opacity:0; // just some nice transitioning
transition:all .5s ease;
}
&:hover{
//border-bottom: 1px solid red;
&:before{
opacity:1;
}
}
}
<p>
<a href="#">
Link
<span>
<img
width="10" src="https://bitsrc.imgix.net/3b69976526d31a20a1fd238f5a32a704cf437dd6.png" alt="logo"
/>
</span>
</a>
</p>
Check here a working sample
There's a few different ways to do it but here's one that doesn't change your HTML flow. Since the image is inside the <a> and the border is being applied to the <a>, you can move the img outside the bounds of the <a> with positioning so it doesn't affect the width of the element and thus the border.
a
{
text-decoration: none;
position: relative;
&:hover{
border-bottom: 1px solid red;
}
img
{
position: absolute;
left: 100%;
padding-left: 5px;
padding-top: 3px;
}
}
The left is to push it to the outside of the element on the right side, and the padding-left and padding-top are to put it in roughly the same position it was in your sandbox.
Updated sandbox
An alternative would be to wrap the text inside the <a> in their own element, like a span, and then apply the border just to the span.
I would recommend wrapping your anchor text inside the span and using CSS to underline that. One thing to keep in mind is that border is going to add to the elements height and will cause a "jumping" effect when you add/remove the border. I would go about making sure a border is always present, but "hidden" when it's being hovered over. You can do this by either using "transparent" as a color or match the color with the background hex value.
https://codesandbox.io/s/cocky-rgb-6he0j
<p>
<a href="#">
<span>Link</span>
<img src="imagePath" alt="logo" />
</a>
</p>
body {
font-family: sans-serif;
}
a {
position: relative;
&, &:hover, span {
text-decoration: none;
}
span {
border-bottom: 1px solid transparent;
}
img {
position: absolute;
left: 100%;
padding-left: 5px;
padding-top: 3px;
}
&:hover span {
border-bottom-color: red;
}
}
EDIT: updated code formatting and added missing body styles
I have a list of links on the left hand side of the page.
I would like to improve this list so that when I put the cursor over an item in this list, some sort of label appears which gives a brief description about what the link is pointing to. The html in question is generated automatically using Antora from AsciiDoc sources and, as far as I can see, all I am able to do is to add a css class or id for the different parts of the link text which are in bold. I cannot add any Javascript or nested css classes.
So here is my attempt:
<!DOCTYPE html>
<html>
<head>
<style>
#Bob.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
#Bob.tooltiptext {
font-size: 5px;
}
#Bob.tooltiptext:hover {
visibility: visible;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
font-size: 10px;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
</style>
<title>Page Title</title>
</head>
<body>
<a href="http://www.bob.com" class="searchEngineLink" >
<strong id="Bob" class="tooltip">Bob</strong>
<strong id="Bob" class="tooltiptext">What a great guy!</strong>
</a>
</body>
</html>
This does not achieve what I want obviously. All it does is have one bit of text in a small font that, when I roll over it, increases into a larger font in a kind of box.
If anyone can think of some way to have a label pop up over some link in a page, even using some completely different approach that I have not thought of, I would be grateful. Note that I will have about 200 links so if I can have a solution that does not require me to have a set of css properties for every different id for each link, that would be preferable.
If any of the this question is not clear, please feel free to ask me.
Simple tooltip can be achieved by usi title attribute: The information is shown as a tooltip text when the mouse moves over the element.
<a href="http://www.bob.com" class="searchEngineLink" title="What a great guy!">
<strong id="Bob" class="tooltip">Bob</strong>
</a>
You can also make your own custom tooltip, by using content property to insert generated content. (description of each link).
.searchEngineLink {
display: inline;
position: relative;
}
.searchEngineLink:hover:after {
background: #eee;
border-radius: 5px;
bottom: -34px;
color: black;
content: attr(gloss);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: auto;
white-space:nowrap;
}
.searchEngineLink:hover:before {
border: solid;
border-color: #ddd transparent;
border-width: 0 6px 6px 6px;
bottom: -4px;
content: "";
left: 40%;
position: absolute;
z-index: 99;
}
<a class="searchEngineLink" gloss="What a great guy" href="http://www.bob.com">Bob</a>
<a class="searchEngineLink" gloss="What a smart guy" href="http://www.bob.com">Bob2</a>
<br>
<a class="searchEngineLink" gloss="What a handsome guy" href="http://www.bob.com">Bob3</a>
Working with a project and I am trying to place a button inside a img title field. I am using boxslider and I am trying to place a href link to the button, but can't get it to work.
img src="images/1.jpg" title="asdad asd adad < button >Test< /button >" alt=""
As soon as I type in href="#" to the < button href="#" > , it wont work.
Anyone know another solution for this problem?
See live exampel: https://adamskymotorkylare.se/beta/ProjectX/
No, it's not possible. Declaring a tag inside the attribute of another tag is illegal. It will never be parsed as tag, but as string.
I assume you want your <img> to function as a button. That can easily be achieved using an anchor (<a>) or button (<button>) tag as a wrapper for the <img> tag:
<a href="#">
<img src="...">
</a>
If you want to place a link inside the title attribute of an <img> simply put, it's not possible. In order to achieve something that resembles this, you need to wrap the image inside a positioned parent and add a tooltip that looks like a title but, in fact, is a proper DOM element displayed when you hover the parent, containing whatever other DOM elements you want, including links.
Basic example (proof of concept):
.parent {
position: relative;
}
.tooltip {
display: inline-block;
max-width: 300px;
border-radius: 6px;
background-color: rgba(255,255,255,.85);
padding: 1rem;
box-sizing: border-box;
position: absolute;
top: 3rem;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 5px 6px -3px rgba(0,0,0,.2), 0 9px 12px 1px rgba(0,0,0,.14), 0 3px 16px 2px rgba(0,0,0,.12);
opacity: 0;
transition: opacity .3s cubic-bezier(.4,0,.2,1), top .3s cubic-bezier(.4,0,.2,1);
}
.tooltip:before {
content: '';
position: absolute;
left: calc(50% - 12px);
bottom: -25px;
width: 1px;
height: 1px;
border: 12px solid transparent;
border-top-color: white;
opacity: .85;
}
.parent > img {
width: 100%;
height: auto;
}
.parent:hover .tooltip {
top: 2rem;
opacity: 1;
}
<div class="parent">
<div class="tooltip">This is a tooltip wannabe with a link.<br />You can go ahead and style it up so it looks more like a tooltip, or you could look into existing tooltip or popover plugins/libaries and use something that's tested cross-browser/cross-device. <br />
Intended as proof of concept.
</div>
<img src="https://source.unsplash.com/random/800x500">
</div>
I am trying to get a link when hovered to show an image just to the left of the link. I have achieved almost what I want minus I am having an html issue.
Trying to get my redtext class to show up on the backslash on the link that has the rollover effect.
Is there a way around this or better way of achieving this? The link in Question is yaya Photography
The CSS
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 0px;
}
.thumbnail:hover span
visibility: visible;
top: -25px;
left: -125px;
}
And here is the html I am struggling to get to work
<a class="thumbnail" href="#accordion"><h3><span class="redtext">/</span> yaya Photography</h3><span><img src="images/yaya/yayathumb.png" /></span></a>
Thanks in advance!
Your problem is that your styles on span are affecting the class="redtext" span also.
A simple way to fix this: you can get rid of the span around your img, and then change the references to span in your CSS to reference img instead.