Alright.. I'm struggling with this one..
I've got an image with a transparent "hole" cut in it, and I place a video behind it. However, when the video is there, the image becomes sort of.. de-saturated.
Here is the CSS
.header {
position: relative;
}
.header img{
position: absolute;
top: 0;
left: 0;
z-index: 10;
cursor: pointer;
}
.header video{
position: absolute;
width: 168px;
left: 553px;
top: 109px;
z-index: 1;
}
And the markup
<div class="span12 header"><img src="img/screenshot-final.png"/><video src="img/video/video-final.mp4"></video></div>
I'm not sure why the video would effect the image since its dimensions are fit to the hole in the image. However, setting display:none on the video "fixes" the image.
Im pretty sure this is unavoidable, have you thought about placing the image ontop of the video to fit the hole with an appropriate z-index. Not ideal but I think the de-saturation is standard for a video overlaying an image!
EDIT: try putting you video in a div tag and the putting your image inside a div tag inside that div! then use absolute positioning to rectify the positioning! this should sort you out
EDIT:
<div class="span12 header">
<video src="img/video/video-final.mp4"></video>
<div id="image">
<img src="img/screenshot-final.png"/>
</div>
</div>
Related
I'm quite new to coding and tried creating a website with what I know to use as my future portfolio. However, my content overlaps my header when I resize my browser, I am hoping for smooth or at least something that doesn't overlap without using tons of media queries.
My header is a 1920x1080 video that is set to width 100%, object-fit: cover and position: absolute. It has header text on top of the header video. My whole page has a full-screen scroll, so my header video and text is wrapped in a div that is set to 100vh.
How do I stop my content from overlapping the header? I am hoping for something that resizes along with the header video, creating a block that the content can't go over, but anything that helps me otherwise would be great.
I tried adding a div but then the div would make the content go too far below sometimes.
I also tried using a 1920x1080 picture that has the same properties as my header video except the absolute positioning that I tried placing above my header but below my header text, but then the picture doesn't resize the same as the video and instead just takes the up the whole 1080px vertically.
I tried using media queries which worked, but I hope there is something else I can do other than using media queries.
Here is the code:
#header-video {
width: 100%;
object-fit: cover;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
overflow-x: hidden;
}
.header-text {
position: relative;
top: 175px;
left: 100px;
color: white;
}
.red-block {
opacity: 1;
width: 100%;
margin-top: -310px;
object-fit: cover;
overflow-x: hidden;
}
<div class="header-text">
<div class="h1-text">HEADER</div>
<div class="h2-text">TEXT</div>
</div>
<div class="red-block">
<img src="resources\red block.webp">
</div>
<header>
<video id="header-video" autoplay loop muted>
<source src="resources\header.webm" type="video/webm">
</video>
</header>
</div>
I would like to place a smaller image with a transparent background in front of a header image in WordPress. The theme I am currently using allows me to set own css styles but I have no clue how to achieve my goal.
Has anybody already worked on this?
Thanks a ton,
Anton
Here is an example how to place an image in front of another image. I placed a PNG of a bee inside a banner image.
HTML
<div id="container">
<img id="banner" src="https://www.mortcap.com/images/sample_report_banner.png">
<img id="bee" src="https://orig00.deviantart.net/672c/f/2014/320/3/1/bee_png_stock_by_karahrobinson_art-d86m7bq.png">
</div>
CSS
#container {
position: relative;
}
#banner {
width: 600px;
}
#bee {
position: absolute;
z-index: 5;
top: 20px;
left: 20px;
width: 100px;
}
When we set position: absolute, that element will always be position relative to the nearest parent with position: relative (or absolute). And then you can refine the position of the absolutely positioned element using top, bottom, left, right css properties.
Play arround with this fiddle
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.
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
I have read so many tutorials about make flash as background of a header, but there are several code involved on there. Can you explain to me how to make flash as background?
The single most important element involved in making flash media a background (i.e. being able to place stuff ontop of it) is to ensure that when embedding, you're setting the wmode to opaque or transparent. Failing to do so will mean that no matter what, the media will render ontop of the other elements on the page.
Other than that, you just need to use CSS to place content over the media via position: absolute; and possibly allocating a higher value for z-index.
You have to create two div's that are exactly on the same place. Then you put your flash content in div 1 and your content you want "on top" in div 2.
<div id="holder">
<div id="flash_header_background">FLASH HERE</div>
<div id="header_foreground">CONTENT HERE</div>
</div>
Then you style your div's with CSS to they are on top of each other.
#holder {
height: 250px; /* Flash height */
width: 800px; /* Flash width */
position: relative;
}
#flash_header_background {
z-index: 1;
position: absolute;
height: 100%;
width: 100%;
}
#header_foreground {
z-index: 2; /* Puts this div above the background DIV */
position: relative;
height: 100%;
width: 100%;
}
IMPORTANT: Remember to set the wmode of your flash content to opaque or transparent. - Thank you strah for reminding