I am trying to have a bit of text showing over the images on the hover state (http://francescaponzini.com/kay/).
So far I've managed to do it with css. However, I am struggling with the positioning. I'd like the text to show when the user hover any point of the image. I've tried to used the position absolute and relative but without success.
Is there a way to have the div that contains the text assume the same dimension of the image if this makes sense?
this is my code so far:
<a class="image_link" href="http://francescaponzini.com/kay/?p=106">
<img src="http://francescaponzini.com/kay/wp-content/uploads/2014/06/Firstname.png" width="450" height="575" alt="" style="width: 243px;">
<div class="text-content">Place Name</div>
</a>
any help or hint appreciated!thanks to all.
.image_link:hover .text-content {
opacity: 1;
}
Change the display of the wrapping link and give a postition:
body.home .hentry > a {
position: relative;
display: block;
...
}
Position the content block and make it fill the wrapping element:
.text-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* Remove width and height declarations */
...
}
Related
is there anyone to add an overlay using html to make the image darker? I tried using data-overlay=0.6. However, no effect took place. If it isn't possible, can I do use the below coding?
!-- Slide 1 -->
<li data-index="slide-1" data-transition="fade" data-slotamount="1" data-easein="default" data-easeout="default" data-masterspeed="500" data-rotate="0" data-delay="6000">
<!-- Main image -->
<img class="pic_slide_one" src="media/image/slider/audi-black-car-8639.jpg" alt="slide-1" data-bgfit="cover" data-bgposition="center bottom">
/* Styling and fetching IMG */
.pic_one_slider {
background:linear-gradient(0deg,rgba(0,0,0,0.95),rgba(0,0,0,0.95)),url('media/image/slider/audi-black-car-8639.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
It looks like your question goes beyond a simple image overlaying. For a single image, my suggestion would be to use an position: absolute div so that you can overlay however you want (color, with another picture, etc)
The idea is:
a container div. Container has here display: inline-block so that it takes the width and height of the img child. If your container has full width, you may skip this
the img itself
an empty div which does the overlay. The overlay can be done via multiple options:
in case of a single color, you can use background: rgba(0, 0, 0, 0.5) where 0.2 is the opacity
Put whatever you want in the div and use opacity: 0.5
Here is an example:
.darken-img{
/* to make absolute children depending on this parent */
position: relative;
/* to make parent div adapt to img width/height*/
display: inline-block;
}
.darken-img img{
height: 400px;
}
.darken-img .darkener{
/* to go overlay the img */
position: absolute;
top: 0;
/* to cover the whole img */
height: 100%;
width: 100%;
/* make your choice here */
background: rgba(0,0,0,0.6);
}
<div class="darken-img">
<img src="http://st.motortrend.com/uploads/sites/5/2017/04/2018-Lexus-NX-300h-front-three-quarter-01.jpg" />
<div class="darkener"></div>
</div>
You could try decreasing the opacity. Depending on your image and expected results, this may be just enough:
.pic_one_slider {
opacity: 0.8;
}
This is difficult to answer without access to all of the css included, but this is how I would do it. You could try overlapping the image with a div with the same width and height of the image and a background-color property set to black and then setting the opacity value of that div.
Note the usage of z-index which requires the position property to be set. In this example I've set it to absolute.
.overlay {
background-color: black;
width: 600px;
height: 400px;
z-index: 2;
position: absolute;
opacity: 0.8;
}
and
<div class="overlay"></div><img class="pic_slide_one" src="https://www.w3schools.com/w3css/img_lights.jpg" alt="slide-1" data-bgfit="cover" data-bgposition="center bottom" style="z-index:1;position: absolute;">
Obviously you could include the styling on your img class somewhere else, such as within your pic_slide_one class.
Is it possible to have markup like this but also background overlay on hover?
<figure class="gallery-item">
<div class="gallery-icon landscape">
<a href="www.google.com">
<img src="http://placehold.it/300x300" />
</a>
</div>
</figure>
I tried placing background-color: #333 on .gallery-icon on hover, but only something like border-bottom appears?
http://codepen.io/filaret/pen/NRpVyr
You are definitely on the right track. Since you are using an :after element for the icon, you should leave that element alone since it's already positioned and defining its own width+height (based off the icon).
The reason the :after selector positions itself correctly is because it's not relying on its parent containers dimensions. You only have it as absolute from the top and left, which is fine. But it doesn't know about how tall it should be, because its parent has no defined height! If you use absolute positioning, you need to define the parent containers dimensions so that the child knows where its bounds are.
So first off, .gallery-icon is already a block element, so you don't need to define its width (its already 100% by nature), just the height:
.gallery-icon {
position: relative;
height: 100%;
}
Second, you should use a :before element to define a background, so that you don't have to mess with the :after icon:
&:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: #333;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
Now, you just have to add the opacity change on hover!
&:hover {
.gallery-icon {
&:before {
opacity: .5;
}
&:after {
opacity: 0.6;
}
}
Hope that helps, here is a codepen forked off your original: http://codepen.io/anon/pen/JRWqxX
Edit: I also noticed that your img tag is causing it to go below the visual bottom of the container, a quick fix is just to add:
.gallery-icon {
img {
display: block;
}
You need to understand your markup works. Your image will be displayed on top of everything, and when you put a background colour on .gallery-icon that background colour will be under the image, and since the anchor link doesn't has a width and height, it only take a little bit of portion, that's why it showing a border bottom.
To create a background overlay on hover, you need to position it to be on top of the image.
Using pseudo element to create a background overlay:
&:hover .gallery-icon {
&::before {
content: '';
background-color: #333;
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0.2;
}
}
The pseudo element has a position absolute so it will displayed on top of the image. top, left, right and bottom 0 to tell the pseudo element to stretch it self as tall and as wide as the parent element.
Hope this helps.
I've tried to simplify the code a little bit. I hope it's what you've tried to achieve.
The trick is to place a as a independent element to img.
<figure class="gallery-item">
<img src="http://placehold.it/300x300">
</figure>
http://codepen.io/anon/pen/LRWoaR
The image (http://placehold.it/300x300) has a solid background colour, no?
That will block anything happening behind itself.
I apologize if this has been answered time and time again. I remember searching thoroughly for an answer a couple years ago when I first wrote up my website script, but I couldn't ever find one. The same for now.
Recently I reworked my website's script so I can host it onto Weebly. Here is one of the four pages of my site that I need help with. As you can see, the images that pop up when the thumbnail is hovered over are absolutely positioned. For most computer resolutions and/or browsers, this will have the image appear out of the designated box.
How could I position them to the inner top left corner of the div? Or better yet, horizontally and vertically centered within it?
<section id="Sizes" style="float: left">
<a href="#Space">
<img class="Small" src="/files/theme/SampleD_Fun_Icon.png" width="150" height="150" alt="Sample 1: Day of Fun" />
<img class="Large" src="/files/theme/SampleD_Fun.png" width="150" height="150" alt="Sample 1: Day of Fun" />
</a>
...
</section>
<a id="Space"></a>
<span class="Popup">Hover over thumbnail to display sample artwork.</span>
<br style="clear: left" />
a:hover img.Small
{
border: 5px solid #21568b;
margin: 10px;
text-decoration: none;
}
section#Sizes a img.Large
{
border-width: 0;
height: 0;
left: 438px;
position: absolute;
top: 326px;
width: 0;
}
section#Sizes a:hover img.Large
{
height: 526px;
left: 438px;
position: absolute;
top: 326px;
width: 520px;
}
.Popup
{
border: 3px solid;
float: left;
height: 272px;
margin: 8px 20px 0px 0px;
padding-top: 254px;
text-align: center;
width: 520px;
}
Thank you for your time. :)
Your whole design is a bit fragile, and I wouldn't recommend building this this way in the first place, but you're looking for practical answers, so here's the smallest change I can think of that fixes your problem:
1) Add this to your style sheet:
body { position: relative; }
2) On line 40 from your main_style.css, change top: 326px to top: 316px and left: 438px to left: 428px, so that it becomes like this:
section#Sizes a:hover img.Large {position: absolute; top: 316px; left: 428px; width: 520px; height: 526px;}
How does that work?
Your images are place using absolute positioning. By default, that works relative to the viewport (the window). But by turning the body into position relative, it becomes a containing block, and position absolute is relative to the nearest containing block ancestor.
So now, your images are fixed within the body element, instead of being fixed relative to the window. Since the margins of the body element is what's changing size when you resize the window, that makes the various pieces of your content fixed relative to each other. You then just need to remove 10px from the top and left side, since that's the size of the border of your body element, and we're now measuring from inside the border.
TLDR: You can't do this in pure CSS.
You can easily position the image inside the container div if you place the image element inside the div element, and then use absolute positioning like top: 0; left: 0; (or with a number of other methods). But then you'd need JavaScript to correlate the hovered thumbnail with the popup full-size image.
Alternatively, you can have the full-size image be nested in the thumbnail element (like you currently have), but then you'd need JavaScript to position the full-size popup image inside the container div.
Of the two alternatives, I recommend the first: put all the popup images inside the target container, and use JavaScript to show or hide them when a thumbnail is hovered. Correlating the thumbnail and the full size image via JavaScript is going to be easier then writing positioning code.
I see you're using jQuery already so why not do something like this?
$('.Small').on('mouseover', function(){
$('.Popup').empty().html($(yourtarget).attr('img' , 'src'));
});
$('.Small').on('mouseout', function(){
$('.Popup').empty().html('Hover over thumbnail to display sample artwork.');
});
Just because everyone was saying it can't be done with pure css, I wanted to demonstrate that it can, and it is even quite easy. Have a look at the folowing example:
http://jsfiddle.net/aafa2zp5/
<div id='images-wrapper'>
<ul>
<li>
<img class='small' src='http://placehold.it/50/ff0000'/>
<img class='big' src='http://placehold.it/300/ff0000'/>
</li>
<!-- and some more similar thumb / image groups -->
</ul>
<div class='preview-area'></div>
</div>
CSS (or the relevant part at least)
#images-wrapper {
position: relative;
}
.big {
display: block;
position: absolute;
top: 54px;
right: 54px;
opacity: 0;
transition: opacity .5s;
}
.preview-area {
width: 350px;
height: 350px;
border: 4px solid blue;
position: absolute;
top: 21px;
right: 21px;
}
li:hover .big {
opacity: 1;
}
The key is to set a position relative to the wrapper (and keep all of the descendants as their default static). Then you can use this to position the preview area and the big images against by setting them to postion absolute and carefully calculating the correct postion. I even added a cross fade, just because it is so easy, but you could just as well work with display block / none if you prefer.
For smaller screens you may want to alter the dimensions and positioning inside a media query, but it still should be doable (though depending on the hover state is perhaps not the best idea on a touch device)
I hope you get the idea and you can figure out how to apply this technique to your own site. Feel free to ask if you want me to explain further or when you get stuck.
I'm trying to layer 2 div's so that the content of one is above another, and the other has an opacity setting to make it translucent. However, no matter which way around I put the HTML for the layers the translucent layer is always above the content. This is the way I would assume to be correct in HTML ordering:
<div id="translucent"></div>
<div id="content">...</div>
However it doesn't seem to be working - The basic styling I'm using to overlap the layers is here - This works to put one over the other, but the translucent one seems to stay above the other one
<style>
#content
{
margin-top:-525px;
}
#translucent
{
height:525px;
opacity:0.8;
}
</style>
Any Ideas?
Why don't you use position and z-indexes? It should work like this:
#content {
margin-top:-525px;
// positioning something allows you to do more accurate placements
position: relative;
// adding a z-index allows you to play with the layers (because... z-axis.)
z-index: 1;
}
#translucent {
height:525px;
opacity:0.8;
position: relative;
z-index: 0;
}
Basically, the HTML DOM works as following: if it's later in the DOM, it is on top of items earlier in the DOM. Turning the opacity down makes the element transparent, but not non-existent. The best way to do this is add z-index and a position, or just use display: block; and display: none; To hide one of yours DIVs (but you want the transparency, so I guess thats not an option).
However if you'd use position: absolute; you could place the elements in the same place without doing the margin. Then wrap it in another element (say #wrapper) and then you can move both boxes at the same time. Add a width and height of 100% for both boxes and you can use the wrapper to define both boxes' height and width and the same time! Ahh. CSS Magic.
<div id="wrapper">
<div id="content">...</div>
<div id="translucent"></div>
</div>
Heres the CSS:
#wrapper {
position: relative;
}
#content {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#translucent {
height:525px;
opacity:0.8;
position: absolute;
left: 0;
top: 0;
z-index: 0;
}
So I have a link with an image:
<a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title="">
<img src="../gs1.jpg" alt="YouTube" />
</a>
and the link has a background image:
<style>
a {
z-index: 99999;
background-image:url('../play-button-red#40.png');
}
</style>
The background image is not being displayed. If I blank out the image url for the link-image, I do see the background, it's just once the link-image is visible it blocks the link-background-image.
Is what I'm going for possible? If so, any advise would be much appreciated.
A background image is what the name implies - a background image - and hence it can not be drawn on top of the elements' content.
Looking at your code I assume you want to display a play button on top of a thumbnail. And I'm assuming the play button is transparent.
I would use this CSS:
a {
display: inline-block;
position: relative;
}
a:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-position: 50% 50%;
background-repeat: no-repeat;
background-image: url('../play-button-red#40.png');
}
Relative positioning of the anchor is very important as this generates the basis for the ::after pseudo element to properly position and size itself.
No z-index is required as ::after pseudo element comes after the content in the document flow and is thusly rendered on top of the content with the above CSS.
I would strongly recommend assigning classes to anchors in question, as it is doubtful you wish to show the play image for every a in the document.
HTML is fine as it is.
I made a working example for you:
HTML:
<a href="#">
<img src="https://cdn3.iconfinder.com/data/icons/social-circle/512/social_4-128.png" alt="YouTube" />
</a>
CSS:
a {
width: 200px;
height: 200px;
display: block;
z-index: 99999;
background:#000 url('http://jsfiddle.net/img/logo-white.png');
}
FIDDLE