I am using a SVG image over that image I need to have a div over the image to set a button area over the image. I have placed a div content in my html file but my image file hides the div content. How to make it?
This my html code:
<div class="fancybox" id="nav" href="#inline1"/>
<img src="billing.svg" id="my_image" class="gold1"/>// this is my image over this I need to place the div content
This is my CSS file:
#nav {
line-height:30px;
background-color:#00FF66;
height:400px;
width:200px;
float:left;
padding:9px;
}
.fancybox{
position:relative;
height://height go image
width:// of image
}
.fancybox img{
position:absolute;
height://height go image
width:// of image
z-index:-1;
}
.myDiv{
position:absolute;
width:// width of dive
z-index:1;
left://margin from left
right://margin right
top:margin from top
bottom:margin from bottom
}
<div class="fancybox" id="nav" href="#inline1"/>
<img src="billing.svg" id="my_image" class="gold1"/>
<div class="myDiv"></div>
</div>
<div class="outerBoxContent">
<div class="fancybox" id="nav" href="#inline1"/>
<img src="billing.svg" id="my_image" class="gold1"/>// this is my image over this I need to place the div content
</div>
css
.outerBoxContent{position: relative;}
.outerBoxContent .fancybox{position: absolute;top: 0px;left: 0px;height: 100%;width: 100%:z-index:123}
This is how you can place the content over a div.
Related
I was wondering if there was a way to make the div, upon resize, extend PAST the vertical screen size?
The div resizes (somewhat) but it will not resize beyond the screen.
My current way of resizing that div (the parchment-coloured box) is:
div.mainBack{
position:absolute;
display:inline-block;
top:50%;
right:5%;
transform:translate(0, -50%);
border-style:outset;
border-color:#B57F00;
border-width:5px;
background-color:#FCDD92; /* PARCHMENT - kind of*/
}
div.mainWrapper{
position:relative;
top:3%;
left:50%;
transform:translate(-50%,0%);
max-width:90%;
}
#imgWrapper{
position:relative;
padding-left:12%;
}
The body for the page I'm talking about is as follows:
<body>
<h1 id="pageHead">The Astantos Armoury</h1>
<p id="subhead">A Simple Introduction to Bladed Weaponry</p>
/* The images have a "href" because I have simple javascript that makes an
image gallery i.e. when you click the image you get a full size version */
<div id="gallery">
<div class="mainWrapper">
<p id="galleryHeading">Image Gallery</p>
</div>
</br>
<div class="mainWrapper" id="imgWrapper">
<img class="gallery"
src="images\sword_thumb.jpg"
href="images\sword.jpg"
data-caption="wallpaper-gallery.net/single/sword-wallpaper/sword-wallpaper-9.html"
alt="dao.jpg">
<img class="gallery"
src="images\dao_thumb.jpg"
href="images\dao.jpg"
data-caption="https://www.aliexpress.com/item/Top-quality-of-Ba-Gua-Dao-Wushu-BroadSwords-with-free-shipping/32439115049.html?spm=2114.40010208.4.111.gVLuZw"
alt="dao.jpg">
<img class="gallery"
src="images\guandao_thumb.jpg"
href="images\guandao.jpg"
data-caption="https://aliexpress.com/item/Damasucs-Steel-Kwan-Dao-Dadao-Guan-Gong-Dao-Master-Dao-Heavy-Duty/32612836207.html?spm=2114.40010208.4.22.j1tTli"
alt="guandao.jpg">
<img class="gallery"
src="images\jian_thumb.jpg"
href="images\jian.jpg"
data-caption="https://au.pinterest.com/pin/325385141814676112/"
alt="jian.jpg">
<img class="gallery"
src="images\spear_thumb.jpg"
href="images\spear.jpg"
data-caption="http://kung-fu-weapons.com/wp-content/uploads/2017/01/sp3-3.jpg"
alt="spear.jpg">
</div>
<div class="mainWrapper" id="homeButton"><p id="welcome">HOME</p></div>
</div>
I've attached images to clarify my point.
I have a section inside which there is an image of a fixed height and a div which has some text and a background color in it. I want to make the height of the div and the image same and the div with the background color to overlap the image so that only text and background color are seen and not the image but the height should be of the image.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section>
<img src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" class="img-responsive">
<div style="background-color:blue">
<h2>ABCD</h2>
</div>
</section>
The image has a bootstrap class of img-responsive so that on resize it shrinks and also the div along with it. How can I do this?
position properties will work same as you want. section will take img's height and by setting height:100%; and position:absolute to div, it will take same height as img
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
section {
position: relative;
}
div {
position:absolute;
left:0;
top:0;
height:100%;
width:100%;
}
</style>
<section>
<img src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" class="img-responsive">
<div style="background-color:blue">
<h2>ABCD</h2>
</div>
</section>
Please have a link of your solution
http://codepen.io/santoshkhalse/pen/pNWpYd
<section>
<img class="img-height" src = "https://openclipart.org/image/2400px/svg_to_png/28688/skotan-Thumbs-up-smiley.png" class = "img-responsive">
<div class="content-text">
<h2> Your text will render here </h2>
</div>
</section>
.img-height{
height:100px;
position:absolute;
}
.content-text{
width:100%;
height:100px;
background:green;
padding-left:120px;
}
img{ display:block; max-width:100%; height:auto;}
section{ position:relative}
.overlap-text{background:rgba(0,0,0, 0.5); color:#fff; position:absolute; left:0; top:0; height:100%; width:100%;}
<section>
<img src="https://s-media-cache-ak0.pinimg.com/originals/2a/94/e3/2a94e33f7afe6600fe9c97eda3a386b3.jpg" class="img-responsive"/>
<div class="overlap-text">
<h2>Lorem Ipsum dummy text</h2>
</div>
</section>
I am trying to make a iphone overlay with a scrolling image inside to showcase mobile website designs, but the image isn't scrolling with the overlayed iphone on top is there something I am doing wrong and how do I fix it?
DEMO: http://jsfiddle.net/jonathanl5660/Lao36z20/
<div>
<img src="https://dl.dropboxusercontent.com/u/9833562/iphone.png" width="370px" height="800px" style="position: absolute; ">
</div>
<div style="width:300px;height:700px;overflow:scroll;margin:30px; position: relitive;">
<img src="https://dl.dropboxusercontent.com/u/9833562/mtest.png" width="98%" height="700px" alt="" style="margin-top:150px;margin-left:10px;" /><br />
<br />
</div>
You could structure your html like this:
<div class="iphone">
<div class="container">
<img src="https://dl.dropboxusercontent.com/u/9833562/mtest.png" alt=""/>
</div>
</div>
And then with CSS adjust the look :
.iphone {
width:370px;
height:800px;
background:url('https://dl.dropboxusercontent.com/u/9833562/iphone.png') no-repeat center;
background-size:100%;
}
.container {
position:relative;
top:152px;
width:293px;
margin:auto;
max-height:496px;
overflow:auto;
}
.container img {
width:100%;
}
Check this demo Fiddle
I've forked your example and twaked it a bit. By keeping inner content at constant width we can expand its container vertically and the effect is that like if we only moved scrollbar to the right. Please also note we can setup overflow behavior spearately for x and y axes.
Here's the JSFiddle link:
http://jsfiddle.net/74yh81s4/2/
and the code:
<div class="position: relative">
<img src="https://dl.dropboxusercontent.com/u/9833562/iphone.png" width="370px" height="800px">
</div>
<div style="width:340px; height:472px; overflow-x:hidden; overflow-y:scroll; margin:30px; position: absolute; top: 142px; left: 17px">
<img src="https://dl.dropboxusercontent.com/u/9833562/mtest.png" width="295px" alt="" />
</div>
Best regards
I want to place text over the image like the following picture shows :
HTML that I wrote is :
<body>
<div class="image_holder">
<img src="bg2.jpg" />
<div class="overlay"> </div>
</div>
<div>NHS SUB</div>
</body>
CSS :
.image_holder {
position:relative;
float:left;
}
.overlay {
position:absolute;
top:0;
background-color:rgba(34,70,118,0.7);
width:100%;
height:100%;
}
The text will automatically go after the image. What should I do to place the text over the image ?
Try this
<div class="image_holder">
<div class="overlay">NHS SUB</div>
</div>
Style
.image_holder{
background:url('img.jpg');
}
Another Way
<div class="image_holder">
<img src="img.jpg"/>
<div class="overlay">NHS SUB</div>
</div>
STYLE
.img_holder{
position:relative;
}
.img_holder img{
postion:absolute;
z-index:-1;
}
.overlay{
z-index:1;
}
Your div class's look like they should infact be ID's. ID's are unique where as class's are used across numerous elements.
Although your nested div approach will work when applying the correct styles, a more semantic (and less markup) would be using Ben's approach - code:
<div class="mydiv" style="background-image:url('bg2.jpg');">overlay text here</div>
<div>NHS SUB</div>
I'm trying to achieve an effect when one div with png img inside (this img has hole in it) is over another div with img inside that will appear in hole of image over it, but for now it still is over instead of being under img with "window". And I still want to keep div that has to be under img ("iphone-screen") inside div with image with window ("iphone") because of responsive issues (percentage width of inner div is related to width of outer div). How to achieve that? Here's link to my website (go to page "Kontakt"):
CLICK
And here's my HTML markup:
<div id="slide6" class="slide">
<h1 class="big">Kontakt</h1>
<h2 class="call">Zadzwoń: <span class="thick">514 944 555</span></h2>
<h2 class="mail">
Napisz: <span class="thick">biuro#dentmedica.pl</span>
</h2>
<div id="iphone">
<img src="img/iphone.png" alt="" />
<div id="iphone-screen">
<img src="img/iphone-screen.png" alt="" />
</div>
</div>
</div>
And CSS:
#slide6 #iphone{
position:absolute;
bottom:0;
right:0;
width:40%;
z-index:600;
}
#slide6 #iphone > img{
width:100%;
height:auto;
z-index:600;
}
#slide6 #iphone #iphone-screen{
position:absolute;
width:44.1%;
overflow:hidden;
bottom:24%;
left:15%;
z-index:100;
}
#slide6 #iphone #iphone-screen > img{
width:100%;
height:auto;
z-index:100;
}
Thanks for any help!
I guess it's the issue with the div tag iphone-screen..remove it