I want to overlay image on another image and change the pixel(location) of it.
I search the google and wrote this code:
.background {
position: relative;
width: 100%;
top: 0;
left: 0;
z-index: 1;
}
.overlay {
position: absolute;
left: 0;
top: 0;
transform: translate(440px, 340px);
z-index: 2;
}
<div class="container-fluid">
<div class="row" style="margin-top:10px;">
<div class="col-md-10 col-lg-10 col-sm-10 col-xs-10 col-xl-10 " id="test">
<img src="static/overlay.png" id="image_master" class="background" style="border: 4px solid lightgrey;">
<img src="static/overlay.png" id="overlay2" class="overlay">
</div>
This code gives me the result I want, but the problem is when I resized the page, the image-overlay get out from the background image.
I want to preserve the proportion between them.
Reason
The reason why the image overlay is not responsive because you are giving a specific value translate(440px, 340px) for transform and this is applicable for all the devices.
How to fix it
Use media queries (#media) for each viewports/devices.
or
Make the overlay-image absolute position with respect to it's container #test.
I've used this approach to achieve the result. You can have a look at the working fiddle.
Link: https://jsfiddle.net/Baliga/fme12tby/22/
Hope this might help you.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.image-container {
position: relative;
display: inline-block;
}
.image-overlay {
position: absolute;
left: 0;
top: 0;
opacity: 0.5;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="image-container">
<img class="image-content" src="https://images.pexels.com/photos/1532771/pexels-photo-1532771.jpeg?auto=compress&cs=tinysrgb&h=350">
<img class="image-overlay" src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&h=350">
</div>
</body>
Related
I want to create a image object composed of 3 images.
Final picture how it should look like
There is one text image and two "gear" images.
Why I want to split them you ask? I want to implement a scrolling function which spins the gears of the image when scrolling down the page.
Later on I want that image object to be always on top at the left corner. Thats why I choose relative position. Cause the gears always have to stay relative to the text.
I got the function already but somehow Im having problems stacking the images onto eachother.
Thats how it currently looks like.
Current state
function rotate(e) {
e.preventDefault();
rot += e.deltaY * 0.5;
leftGear.style.transform = `rotate(${rot}deg)`;
rightGear.style.transform = `rotate(${rot}deg)`;
}
let rot = 0;
const leftGear = document.querySelector(".leftGear");
document.body.onwheel = leftGear.onwheel = rotate;
const rightGear = document.querySelector(".rightGear");
document.body.onwheel = rightGear.onwheel = rotate;
/* To make white images become visible */
body { background: #161924 }
.nav-logo {
width: 40px;
height: 40px;
}
.rightGear {
position: relative;
z-index: 2;
}
.leftGear {
position: relative;
z-index: 2;
}
.leftGear img {
display: block;
}
.rightGear img {
display: block;
}
<div class="nav-logo" style="display: block">
<img src="https://i.stack.imgur.com/vSCDm.png" height="60">
<div class="rightGear" id="rightgear">
<img src="https://i.stack.imgur.com/6541L.png" height="40">
</div>
<div class="leftGear" id="leftgear">
<img src="https://i.stack.imgur.com/6541L.png" height="40">
</div>
</div>
gearText.png (It has some blueish background so it doesn't overlap the wrong sections)
gear.png
You can play with absolute position and z-index here.
body {
background: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.nav-logo {
position:relative;
}
.rightGear {
position: absolute;
top: 12px;
left: 3px;
z-index: -1;
}
.leftGear {
position: absolute;
bottom: 6px;
right: 5px;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="nav-logo" style="display: block">
<img src="https://i.stack.imgur.com/vSCDm.png" height="60">
<div class="rightGear" id="rightgear">
<img src="https://i.stack.imgur.com/6541L.png" height="30">
</div>
<div class="leftGear" id="leftgear">
<img src="https://i.stack.imgur.com/6541L.png" height="30">
</div>
</div>
</body>
</html>
You need to wrap the first image into another div then make all of your positions absolute. Here's an example
.nav-logo {
width: 40px;
height: 40px;
}
.rightGear {
position: absolute;
z-index: 2;
}
.leftGear {
position: absolute;
z-index: 2;
}
.leftGear img {
display: block;
}
.rightGear img {
display: block;
}
.main{
position: absolute;
}
<div class="nav-logo" style="display: block">
<div class="main">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" height="60">
</div>
<div class="rightGear" id="rightgear">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" height="40">
</div>
<div class="leftGear" id="leftgear">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" height="40">
</div>
</div>
Just move those gears with position properties, depending on what you need. Also the gears are under the main logo, so they should have lower z-index than the main logo.
Also change the height of each gear from 40 to 30.
body {
background: #161924
}
.nav-logo {
width: 40px;
height: 40px;
}
.rightGear {
position: relative;
top: -52px;
left: 3px;
z-index: -2;
}
.leftGear {
position: relative;
top: -69px;
left: 27px;
z-index: -2;
}
.leftGear img {
display: block;
}
.rightGear img {
display: block;
}
<div class="nav-logo" style="display: block">
<img src="https://i.stack.imgur.com/vSCDm.png" height="60">
<div class="rightGear" id="rightgear">
<img src="https://i.stack.imgur.com/6541L.png" height="30">
</div>
<div class="leftGear" id="leftgear">
<img src="https://i.stack.imgur.com/6541L.png" height="30">
</div>
</div>
I am just learning HTML. Is there a way without using image mapping to split a background image into 50-50%, with each half linking to an external link? I put style=0% and 50% to split the links into the top 50% and bottom 50%, but it doesn't split the image in two.
This is what I have:
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
<link href="https://fonts.googleapis.com/css?family=Proxima+Nova" rel="stylesheet">
</head>
<body>
<div class="image">
<center><img src="{% static 'picture.png' %}" alt="image" /></center>
</div>
</body>
</html>
Thanks in advance!
Just put the img as a background-image via css, then position the links on top of a container with that background-image:
.split-link-image {
height: 400px;
background: transparent url(http://placekitten.com/400/400) no-repeat 0 0;
background-size: cover;
width: 400px;
position: relative;
}
.split-link-image a {
position: absolute;
left: 0;
right: 0;
height: 50%;
display: block;
}
.split-link-image a:first-child {
top: 0;
}
.split-link-image a:last-child {
bottom: 0;
}
<div class="split-link-image">
</div>
This is a simple sample:
<div style="position: relative; width:500px; height:500px; background-color: #667799">
<a style="display: inline-block; position: absolute; top:0; left:0; height:50%; width:100%; box-sizing: border-box; border:solid 1px red" href="addr1"></a>
<a style="display: inline-block; position: absolute; top:50%; left:0; height:50%; width:100%; box-sizing: border-box; border:solid 1px orange" href="addr2"></a>
</div>
My wrapper is div and i use background-color for wrapper of links ;you must use background-image:url(imageAdress);
Also you don't need border of a tags.
I have created something that does what you are looking for. It has the following limitations:
You need to know the height of the image you are using in pixels and code the top half to be exactly half that many. When I use % instead, I wind up with the top link being bigger than the bottom. I didn't do much playing around to try and get around that.
The image actually is loaded twice, so if your images are very big, this may be a concern for you.
* {
margin: 0px;
padding: 0px;
}
.top {
height: 200px;
overflow: hidden;
position: absolute;
z-index: 2;
}
.bottom {
position: absolute;
}
<a class="top" href="https://www.google.com"><img src="https://placeholdit.co//i/400x400" /></a>
<a class="bottom" href="https://www.cnn.com"><img src="https://placeholdit.co//i/400x400" /></a>
This is what I have so far
This is the code that I used to get this image on there:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet"type="text/css"href="index.css"/>
<title>My Title</title>
</head>
<body>
<div class="slider">
</div>
</body>
</html>
and here is the CSS I used for my div "slider" class
.slider{
background-image: url('images/background.png');
height: 100%;
width: 50%;
position: absolute;
background-repeat: no-repeat;
}
So how can I make a div INSIDE of this div, which will allow me to display a slideshow of my app's images? I want it to be very similar to these websites:
shazam.com
instagram.com
venmo.com
I don't know how to fit these images the right way, can somebody please help?
If I understand you correctly, you are talking about something like this
JSFiddle Demo
var $canvas
$(function(){
$canvas=$("div.canvas")
setInterval(scroll, 5000);
});
function scroll(){
if ($canvas.position().left!=-1195){
$canvas.animate({left: "-=239"});
}else{
$canvas.animate({left: 0});
}
}
.mask {
position: absolute;
left: 31px;
top: 122px;
width: 239px;
height: 342px;
overflow: hidden;
}
.canvas {
position: relative;
width: 2195px;
height: 342px;
}
.page {
width: 239px;
height: 342px;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<img src="https://d3sq5bmi4w5uj1.cloudfront.net/images/brochure/apps/iphone.png">
<div class="mask">
<div class="canvas">
<div class="page" style="background: red;"><img src="https://www.w3schools.com/w3images/fjords.jpg"/></div>
<div class="page" style="background: blue;"><img src="https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067"/></div>
</div>
</div>
so I have some HTML that looks like this:
<div id="container">
<svg id="chart1"></svg>
<div id='logo'>
<img id="logo" src="cubs_best.png";>
</div>
</div>
With corresponding CSS like,
svg {
/*display: block;*/
position: relative;
z-index: 1;
}
html, body, #container, svg {
margin: 0px;
padding: 0px;
height: 80%;
width: 100%;
}
#logo {
position: absolute;
z-index: 10;
top: 15px
left: 15px;
}
you would think that the div with the image would be placed on top, right? (there's no separate CSS styling for chart1)
But this is what it shows, and it won't budge.
Edit
#container {
position: relative;
}
didn't change anything sadly enough.
The whole code (minus Javascript underneth that makes the D3 graph/svg):
Have you tried following sequence to get logo to the top of the chart:
<div id="container">
<div id='logo'>
<img id="logo" src="cubs_best.png";>
</div>
<svg id="chart1"></svg>
</div>
Also, remove semicolon at the end of img holder <....src="cubs_best.png";>
I have some trouble with CSS.
I have code (example):
<div class="background" style="background: url(sample.jpg) no-repeat;">
<div class="text-title">Title</div>
<div class="text">Random stuff</div>
</div>
What I want to do is, that when hovering on this background image - it should get opacity to lets say 0.3, but how to make it, that inside items would stay the same opacity 1?
Here's the best trick in the book. https://jsfiddle.net/xbxvr8as/
If you have trouble with CSS then this might well bend your brain but the jsfiddle is as pared down as you can get it. Play with it by removing single styles to see what happens.
The crux is to relative:position your element. Then you can add a "pretend" extra div-like thing using the :after pseudo-element. You give this pseudo-element a bunch of properties - the most important probably being position:absolute which allows it to sit straight underneath the text.
HTML
<div id="a">
some stuff in here .....
</div>
CSS
#a{position:relative}
#a:after{
content:" ";
position:absolute;
display:block;
top:0;left:0;right:0;bottom:0;
background-color:#f00;
z-index:-1;
opacity:0.2;
}
You could use a pseudo element.
<div class="background">
<div class="text-title">Title</div>
<div class="text">Random stuff</div>
</div>
.background {
position: relative;
background-color: yellow; /* added for illustrative purposes */
min-height: 150px; /* added for illustrative purposes */
}
.background:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.3;
background-image: url('http://lorempixel.com/output/abstract-q-c-640-480-3.jpg');
background-repeat: no-repeat;
}
jsFiddle: http://jsfiddle.net/3kbf5p5x/
You could put the background on an absolutely-positioned element within the outer element, and then control its opacity independently:
<div style="position: relative">
<div class="background" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url(sample.jpg) no-repeat;">
</div>
<div class="text-title">Title</div>
<div class="text">Random stuff</div>
</div>
Note that to do that, we have to make its container positioned via position: relative.
Live Example:
body, html {
height: 100%;
}
.outer {
width: 100%;
height: 100%;
}
.background {
opacity: 0.5;
}
<div class="outer" style="position: relative">
<div class="background" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url(http://onlyfreewallpaper.com/download/sea-coast-night-sky-stars-milky-way-1024x768.jpg) no-repeat;">
</div>
<div class="text-title">Title</div>
<div class="text">Random stuff</div>
</div>