full screen image with a row of small images below - javascript

Here is an image slideshow.
My homepage will have such a slideshow. But the top row (sites, files, editor etc) will move to the bottom.
The slide show (with one large image at a time and a row of small images below) will stretch over the full page.
How can I make it stretch over the full page as i explained before?
Edit: Actually, what I want to know is how can I make an image (not a background image) stretch over the full page with a little space below?

CSS:
<style>
.big, .list {
position: fixed;
bottom: 100px;
left: 0;
width: 100%;
height: 100%;
}
.list {
bottom: 0;
height: 100px;
background: #000;
}
</style>
HTML:
<img src="http://goo.gl/8JnW8" class="big" alt="" />
<div class="list">{images}</div>

Let's say this is the HTML:
<body>
<img id="bgimg" src="image.jpg" alt="Image"/>
</body>
You can style it like this:
body {
position: relative;
width: 100%;
height: 100%;
}
#bgimg {
top: 0;
left: 0;
display: block;
position: absolute;
width: 100%;
height: 98%;
}
This should work.

Related

Could background-color have different z-index than img?

I need to one image overlap an another. But the second image have background color and I need the first image between the second and second's background-color. It is possible? Already tried to made a new "div class" instead of style="background-color". Now i am stuck with this:
.mainRunner {
position: relative;
}
.firstimage {
position: relative;
z-index: 2;
}
.secondimage {
position: relative;
z-index: 3;
top: -75px;
}
.background {
position: relative;
z-index: 1
}
<div class="firstimage" style="max-width: 1170px;"><img src="" alt="" title="" style="width: 100%;" max-width="1168" height="399" caption="false" /></div>
<div class="background" style="background-color: #f2e5df;">
<div class="secondimage">
<img src="" alt="" title="" />
</div></div>
You can't give certain properties of an element different z-index values. However for certain elements like a div you can use ::before and ::after pseudo elements. And you can set a z-index on those, effectively creating three layers. More information here.
In this case you can create a div with the middle img inside. Then add a ::before and ::after to that div. Giving one a background color and a z-index of -1. And the other a background image and a z-index of 1.
In the example below I also added some margin and a border around the inital div so you can better see what is going on.
.image {
margin: 20px 0 0 20px;
position: relative;
border: 3px solid coral;
width: 200px;
height: 300px;
}
.image::before,
.image::after {
content: '';
display: block;
width: 200px;
height: 300px;
position: absolute;
}
.image::before {
z-index: -1;
background: cornflowerblue;
top: 20px;
left: 20px;
}
.image::after {
z-index: 1;
background: url("https://www.fillmurray.com/200/300");
top: -20px;
left: -20px;
}
<div class="image"><img src="https://www.fillmurray.com/200/300" /></div>
If I understand right what you're trying to achieve, you probably should be placing the images within background div and placing the second image with position: absolute:
<style>
.mainRunner {
position: relative;
}
.firstimage {
position: relative;
z-index: 2;
}
.secondimage {
position: absolute;
z-index: 3;
top: 20px; /* use top and left values to place the image exactly where you want it over the first image */
left: 20px
}
.background {
position: relative;
z-index: 1;
background-color: #f2e5df;
}
</style>
<div class="mainRunner">
<div class="background">
<img src="image1.png" class="firstimage" />
<img src="image2.png" class="secondimage " />
</div>
</div>
It sets the background color as the back-most element, then on top of it the secondimage and the firstimage.
Thank everyone for their ideas. In the end the solution was simple. In the style was the double definition of second image. And the first of them was just partly commented. So my first post working right like this:
.secondimage img{
max-width: 100%;
height: auto;
position: relative;
top: -75px;
margin: 5px;
margin-bottom: 10px;
}
Now just need to find out how to close this question...
Thank you :)
The answer is simply no... there is no way to address a z-index to specifically a background of an element, z-index and all the other CSS properties work on the entire element, not on only its background.
You're going to have to find another way to do this, have you thought of using a div with not content, and the same size of the image, and then just setting a background color to that specific div?

How to replace the white in an image using Javascript?

Pinterest (here is an example) and some other sites replace the white in their images with a gray color. They do that for all of their images and it seems to be on the client side.
Is this possible using Javascript, or is there another way they are doing this?
Here's a quick & dirty example that might help get you started:
$('#container').on("mouseenter mouseleave", () => {
$('.overlay').toggle();
});
#container {
display: inline-block;
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: .25;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='container'>
<img src="http://imagizer.imageshack.com/v2/600x742q90/537/xAgiLR.jpg" width="200px" height="247px">
<div class="overlay" />
</div>

Removing iframe white space around videos?

How can I get rid of this extra white space that iframes create? I am using a reference to a web app but, as far as I know, it should stretch to any 16:9 aspect ratio window. This isn't happening though. It seems this happens with other videos too, but the sides are often transparent. Is there a way I can do that here? Thanks
HTML:
<body background="images/Background.png">
<iframe id="primaryVideo" src="http://54.202.201.116/app/5/">
<p> Your browser does not support iframes. </p>
</iframe>
<button id="restart" left="1%">Start Over</button>
</body>
CSS:
#videoWrapper{
height: 100%;
}
#primaryVideo{
width: 80%;
height: 80%;
border: none;
position: absolute;
float: left;
display: inline;
}
div{
text-align:center;
}
I dug into the layout of that address and found the real location of the video. I applied the styles suggested from this old but still relevant article. It's 100% responsive. If you don't want it as big as the viewport, adjust the width of div.frame accordingly.
Demo 1 is the actual video in an iframe, Demo 2 is the site the has the video within the iframe. The player in Demo 2 looks like videoJS plugin so if you play the video through that, then the dimensions are up to the site which is still responsive. You can't see it functioning on SO because the site in question does not support https. Check it out at this Plunk.
Demo 1
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.frame {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
iframe {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
<div class='frame'>
<iframe src='https://s3-us-west-2.amazonaws.com/static.tapmedialabs/tap_media_intro_video_v8.mp4' width='100%' height='100%' allowfullscreen frameborder='0' scrolling='no'></iframe>
</div>
Demo 2 see Plunk for a functioning demo
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.frame {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
iframe {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
<div class='frame'>
<iframe src='https://54.202.201.116/app/5/' width='100%' height='100%' allowfullscreen frameborder='0' scrolling='no'></iframe>
</div>

CSS positioning/resizing html5 video background

Hey all you wizards of the interwebs,
I've been pulling my hair out for the past couple of days trying to figure this one out.
I'm trying to include a fullscreen video background and it seems I have hit a snag.
Below is an image of what I am trying to accomplish.
I tried it with the video element as well as an iframe. I can't get the div below to always nest under, when the browser window is resized.
Any help or pointers are greatly appreciated. Closest I've gotten was with a min-width/height but it still leaves a gap...
What I end up with is what shws in the 2nd img. The video resizes with the browser and there's a gap below it
To prevent the problem you need to do this:
css:
.div1{ background-color: red; height: 100%; position: relative; overflow: hidden;}
.div2{ background-color: black; height: 100%;}
video{ position: absolute; height: 100%; width: 100%; margin: 0; padding: 0; top: 0; bottom:0; right: 0; left: 0;}
and put your video inside div1:
<div class="div1">
<video autoplay>...</video>
</div>
<div class="div2">
</div>
It don't allow video element to show at overflow. and div1 is always height:100% and div2 is always height:100%.
If you like to fit the video to the div1 add
object-fit: cover;
to the video tag.
IE Doesn't Support object-fit
I'm not sure if this will work but
Have you tried removing width: 100% and only keeping height: 100% ?
I might be able to give better suggestions, if you can show the code :p
EDIT:
Since you want height to be screen height and width can be more or less, I'd say, try
min-height: 100%;
width: auto;
height: auto;
This should do the trick
NEW EDIT:
body{
overflow:hidden;
}
#wrapper {
width: 100%;
height: 100%;
}
.videoInsert {
min-height: 100%;
min-width: 100%;
height: auto;
width: auto;
position: absolute;
left: 0%;
top: 0%;
}
video{
display: inline-block;
vertical-align: baseline;
object-fit: fill;
}

how to fix issue with images link on hover?

so i have 3 images they all are using the same code with different style of course first image is on left second image is in middle and third is on right.
bottom: 10;
left: 0;
right: 0;
position: fixed;
text-align: center;
margin: 0px auto;
okay so the issue i'm having is when you are to hover on the image it can only hover the pointer on either top part of the image but when hovering over the image on bottom then it detects no link at all.
sample of code for image I'm using
<a href="/"><img style="width: 130px; height: 130px; border: 0px; display: inline;" src="img">
</a>
All of the images are different sizes but one the first image i resized the image to like 150px width and 100 width height then the hover start working but i want the image to be hover on 100px width and 50px height and when i do that it only hovers over right side of the image and this image is the first image on left. Second image i tried resizing but it only hovers on top of the image. any help will be appreciated :)
There's a problem in your CSS. All of your <div>'s containing the anchor tags and the images have a fixed position along with left: 0 which is why they are overlapping. You can achieve what you're trying to do like this, I've modified the HTML and added new CSS:
#images {
text-align: center;
}
#images a:nth-child(2) {
display: inline-block;
float: left;
}
#images a:last-child {
display: inline-block;
float: right;
}
<div id="images"><img style="width: 100px; height: 100px; border: 0;" src="http://7brands.com/wp-content/uploads/2014/07/google-maps-logo.jpg" />
<img style="width: 100px; height: 80px; border: 0;" src="http://7brands.com/wp-content/uploads/2014/07/google-maps-logo.jpg" />
<img style="width: 100px; height: 80px; border: 0;" src="http://7brands.com/wp-content/uploads/2014/07/google-maps-logo.jpg" /></div>
I dont know exactly your need, from my understand you can do it as follow:
Add this css styles and hover the image:
#img1 {
bottom: 10;
left:0;
right:0;
position: fixed;
text-align:center;
margin: 0px auto
z-index:1;
}
#img1 img:hover {
width:100px !important;
height:50px !important;}
Fiddle:http://jsfiddle.net/1hwm3epj/16/

Categories