I am trying to add an image and a textbox inside a DIV that has a opacity of 60%. For some reason the two objects also inherits the opacity as well. How do I prevent it?
HTML:
<body>
<div id="sliderdiv">
<div id="slider">
<img src="i2.jpg" alt="" />
<img src="i3.jpg" alt="Pure Javascript. No jQuery. No flash." />
<img src="i4.jpg" alt="#htmlcaption" />
<img src="i5.jpg" />
</div>
<div id="htmlcaption" style="display: none;">
<em>HTML</em> caption. Link to Google.
</div>
</div>
<div id="bg">
<img src="wmlogo.jpg" width="140" height="30" alt="Westmed Medical Group" title="Westmed Medical Group Homepage" id="logoimg" />
<input type=text size=25 id=insidebgtext />
</div>
</body>
CSS:
* {
background-color: #CC0000;
padding: 0px;
margin: 0px;
}
#bg {
position: absolute;
background-color: #000000;
height: 50px;
width: 100%;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
z-index: 1;
}
#insidebgtext {
position: absolute;
top: 25%;
right: 20%;
background-color: #FFFFFF;
z-index: 25;
}
#sliderdiv
{
position:absolute;
left:0px;
top:0px;
width: 100%;
height: 306px;
z-index:-1;
background-color: #FCFCFC;
}
#logoimg {
position: absolute;
top: 15%;
left: 25%;
z-index: 25;
}
How it appears:
The inheritance of the properties of parents in the child in very obvious. For your purpose you can use a proxy way of using a transparent png image for the background and avoid the use of opacity all together.
Related
I'm working on my portfolio site now. My projects are listed as clickable images, arranged into two columns. I want it that when a user hovers over an image, a solid block of color covers it with the project title in the center. Basically like this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade.
I had it working perfectly when I used row/column css classes, but since I've found that to not be very responsive (on mobile, the first column gets stacked on top of the other, which makes sense but that's not the order I want), I aligned the images with float and padding instead. Now, the hover effect/link stretches across the entire page, instead of being contained in the image area.
Here's my code for reference:
CSS
.container {
position: relative;
}
.image {
display: block;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
height: 100%;
width: 100%;
transition: .5s ease;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 30px;
font-family: "Lato-Bold";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
#media screen and (min-width: 1025px) {
.image {
float: left;
width: 45%;
padding-left: 40px;
padding-right: 15px;
padding-bottom: 30px;
}
}
HTML
<div class = "container">
<img src="image name" class = "image">
<div class="overlay" style = "background-color: #color;">
<div class="text">project title</div>
</div>
</div>
How can I fix this? I've tried adding display: block to the .overlay class. I've tried making the .overlay class the same size as the image. I've also tried wrapping the link around the container class instead of the other way around like it is now. Nothing happens at all. I've also tried adjusting the container size, but that shrunk the images and stacked them into 1 column :(
Read about Responsive Images and Flexbox
Try the following code.
Note: I changed the HTML structure slightly.
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.thumb {
position: relative;
width: 50%;
}
.thumb img {
width: 100%;
}
.thumb:hover .overlay {
opacity: 1;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
height: 100%;
width: 100%;
transition: .5s ease;
color: #000;
background: #fff;
}
.overlay .text {
position: absolute;
top: 50%;
transform: translate(-50%);
left: 50%;
text-align: center;
}
<div class="container">
<a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
<div class="overlay">
<div class="text">project title</div>
</div>
</a>
<a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
<div class="overlay">
<div class="text">project title</div>
</div>
</a>
<a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
<div class="overlay">
<div class="text">project title</div>
</div>
</a>
<a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
<div class="overlay">
<div class="text">project title</div>
</div>
</a>
</div>
I'm trying to apply absolute positioning on class car. I expect it to be placed in top-left corner inside rectangle. The current behavior is being placed in top-left corner of the page which I don't want. As far as I know absolute element must be positioned inside its ancestor.
body {
padding: 25px;
}
.car {
position: absolute;
}
#rectangle {
/* display: inline-block;
position: absolute;
top: 150px;
left:25px; */
width: 3324px;
height: 5112px;
background-color: #00b3ee;
}
#intro {
/* position: absolute;
top: 800px;
left:25px; */
border: solid 1px;
padding: 10px;
}
<body>
<div id="intro">
<p>
Floor <b><i>{{ $title }}</i></b> setup successfully finished!
Return to floors.
</p>
</div>
<div id="rectangle">
<img src="{{ url($map_image_path) }}">
<a href="#" class="car" style="position: absolute; top: 0px; left: 0px;">
<img id="dynamic" src="http://localhost/ParkingMinis/public/images/icons/car/reza1.png">
</a>
</div>
</body>
Add position: relative to the #rectangle class. Absolute positioning is relative to the first positioned ancestor.
Hey cheack this out http://learnlayout.com/position.html
#rectangle {
position : relative;
}
Here you go buddy.
body
{
padding: 25px;
}
.car
{
position: absolute;
top: 0 ;
left:0;
padding: 25px;
}
#rectangle
{
position:relative;
width: 3324px;
height: 5112px;
background-color: #00b3ee;
}
#rectangle img{
height: 50px;
}
#intro
{
/* position: absolute;
top: 800px;
left:25px; */
border: solid 1px;
padding: 10px;
}
<div id="intro">
<p>
Floor <b><i>{{ $title }}</i></b> setup successfully finished!
Return to floors.
</p>
</div>
<div id="rectangle">
<img src="{{ url($map_image_path) }}" >
<a href="#" class="car" style="position: absolute; top: 0px; left: 0px;">
<img id="dynamic" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
</a>
</div>
I want to put two images inside an anchor tag where the second image is a player button which should be placed on top of the first image.
The anchor tag exists inside a span and that cannot change. Generally the HTML structure of the page cannot change.
Is it possible to achieve this?
This is what I have tried without success.
span.x {
display: block;
height: 40px;
width: 40px;
}
.x img {
width: 100%;
height: 100%;
.videoicon {
position: absolute;
top: 50%;
left: 50%;
}
}
<span class="x">
<a id="videolink" href="http://www.youtube.com/watch?v=ImTTW94ZicM"
class="video-class" target="_blank">
<img src="https://i.ytimg.com/vi/ImTTW94ZicM/mqdefault.jpg" border="2px" alt="Video">
<img class="videoicon" src="http://vignette3.wikia.nocookie.net/plazmabursttwo/images/a/a8/Play_button.p ng/revision/latest?cb=20121111212438" data-pin-nopin="true">
</a>
</span>
EDIT
There are many span elements with different sizes like the above that should be placed dynamically inside a div every time the page is rendered. So, I am not able to use hard-coded height/width/top etc values.
Thank you
This may help you, if videoicon has fixed height and width, you can set its position by calc(50% - half of videoicon's height) i.e., calc(50% - 20px)
span.x {
display: block;
position: relative;
height: 220px;
width: 220px;
}
.x img {
width: 100%;
height: 100%;
}
.x .videoicon {
position: absolute;
top:calc(50% - 20px);
left:calc(50% - 20px);
height:40px;
width:40px;
}
.small{
margin-top:20px;
height:100px!important;
width:100px!important;
}
<span class="x">
<a id="videolink" href="http://www.youtube.com/watch?v=ImTTW94ZicM" class="video-class" target="_blank">
<img src="https://i.ytimg.com/vi/ImTTW94ZicM/mqdefault.jpg" border="2px" alt="Video" />
<img class="videoicon" src="http://vignette3.wikia.nocookie.net/plazmabursttwo/images/a/a8/Play_button.png/revision/latest?cb=20121111212438" data-pin-nopin="true" />
</a>
</span>
<span class="x small">
<a id="videolink" href="http://www.youtube.com/watch?v=ImTTW94ZicM" class="video-class" target="_blank">
<img src="https://i.ytimg.com/vi/ImTTW94ZicM/mqdefault.jpg" border="2px" alt="Video" />
<img class="videoicon" src="http://vignette3.wikia.nocookie.net/plazmabursttwo/images/a/a8/Play_button.png/revision/latest?cb=20121111212438" data-pin-nopin="true" />
</a>
</span>
You can achieve that with positioning. Make the wrapper span position: relative to make the childrens position depending on the wrapper. Now just add position: absolute; with top:0; (or a value that suits your needs) to the second image:
span.x {
display: block;
position: relative;
height: 40px;
width: 40px;
}
.x img {
width: 100%;
height: 100%;
}
.videoicon {
position: absolute;
top: 0;
}
<span class="x">
<a id="videolink" href="http://www.youtube.com/watch?v=ImTTW94ZicM" class="video-class" target="_blank">
<img src="https://i.ytimg.com/vi/ImTTW94ZicM/mqdefault.jpg" border="2px" alt="Video" />
<img class="videoicon" src="http://vignette3.wikia.nocookie.net/plazmabursttwo/images/a/a8/Play_button.png/revision/latest?cb=20121111212438" data-pin-nopin="true" />
</a>
</span>
For demonstration purposes, I converted your LESS to CSS in the snippet above. The following code would be your LESS:
span.x {
display: block;
position: relative;
height: 40px;
width: 40px;
}
.x img {
width: 100%;
height: 100%;
.videoicon {
position: absolute;
top: 0;
}
}
this is Your code in which i have edit some portions
<html>
<head>
<style>
span.x {
display:block;
height:100%;
width:100%;
}
.x >img
{
width: 100%;
height:100%;
}
.videoicon{
position: absolute;
top: 50%;
left: 50%;
bottom: 0;
width: 50px;
z-index: 1000;
overflow: hidden;
right: 0;
}
#img11{
width:100%;
height:100%;
}
</style>
</head>
<body>
<span class="x">
<a id="videolink" href="http://www.youtube.com/watch?v=ImTTW94ZicM"
class="video-class" target="_blank">
<img id="img11" rc="https://i.ytimg.com/vi/ImTTW94ZicM/mqdefault.jpg" border="2px" alt="Video">
<img class="videoicon" src="http://vignette3.wikia.nocookie.net/plazmabursttwo/images/a/a8/Play_button.png/revision/latest?cb=20121111212438" data-pin-nopin="true">
</a>
</span>
</body>
</html>
I have the following html:
<div class="article">
<img src="..." class="article-bg">
<h1 class="heading">Article Heading</h1>
<h2 class="author">Author Name</h2>
</div>
The article divs background image gets set dynamically, so setting the divs background in css is out, I have to use an image tag. I'm not too sure though how to use an img as the divs background, and at the same time have text over the img.
Also the height of the article div should always be 180px, I only have the following simple CSS:
.article {
height: 180px;
padding: 10px;
background-color: blue;
}
Thanks in advance for any tips!
You can do it by this way:
<div class="article">
<img src="http://www.bdembassyusa.org/uploads/images/beautiful-Bangladesh-23.jpg" class="article-bg">
<h1 class="heading">Article Heading</h1>
<h2 class="author">Author Name</h2>
</div>
Ad some more css below:
.article{
height: 180px;
padding: 10px;
background-color: blue;
overflow:hidden;
}
.article img{
position:absolute;
z-index:0;
width: 100%; // make the img fluid
height:200px;
margin:-10px;
object-fit: contain; // similar to `background-size: contain;`
}
.article h1,.article h2{
position:relative;
z-index:1;
}
Test it on jsfiddle:
http://jsfiddle.net/sarowerj/o9L72do0/
What you're looking for in z-index.
Using Z-index allows you to position one element above of the other. But do keep in mind that z-index does only work with positioned elements such as absolute or relative positioning.
You do specify a z-index as follows in the CSS:
.heading { position: absolute; top: 10px; left: 10px; z-index: 900; color: #fff; }
See this jsFiddle for a demo on how to use it:
You can use the CSS property object-fit for this.
However it is worth noting that this property has very little to no support on IE and Edge browser.
.conainer{
position: relative;
width: 500px;
height: 300px;
color: #ffffff;
overflow: hidden;
margin: auto;
}
.conainer img{
position: absolute;
top: 0;
left: 0;
transition: all 1s ease;
}
.conainer:hover img{
transform: scale(1.2);
}
.conainer .content{
position: relative;
z-index: 1;
}
.conainer .content h2{
color: white;
text-shadow: 3px 2px 10px #545454;
text-align: center;
}
<div class="conainer">
<div><img src="https://placeimg.com/640/480/nature" alt=""></div>
<div class="content">
<h2>Here's an example</h2>
</div>
</div>
You can use this code, to make <img> behave like a background image:
<img src="..." class="background-image" />
.background-image {
position: absolute;
z-index: -1;
min-width: 100%;
min-height: 100%;
left: 0;
top: 0;
pointer-events: none;
}
use
<div class="article" style="background: url(imageurl)">
</div>
I'm trying to overlap some images, but whatever combination of positions I try, it doesn't seem to work.
this is the HTML
<li class="six">
<img class="06a" src="../inhouds/images/page06a.png">
<img class="06b" src="../inhouds/images/page06b.png">
<img class="06c" src="../inhouds/images/page06c.png">
</li>
this is the CSS
.06a {
position:absolute;
z-index: 250;
}
.06b {
position:absolute;
z-index: 260;
margin-left: 50px;
}
.06c {
position:absolute;
z-index: 270;
margin-left: 100px;
}
I hope someone can help me out!
Are you looking for this kind of overlap DEMO
Change markup to better semantic(alphabets for class,not numbers) :
<li class="six">
<img class="a" src="http://www.jonathanjeter.com/images/Square_200x200.png" />
<img class="b" src="http://www.jonathanjeter.com/images/Square_200x200.png" />
<img class="c" src="http://www.jonathanjeter.com/images/Square_200x200.png" />
</li>
CSS i did
li {
list-style:none
}
Click here for a working Demo
Do not start classnames with numbers. Use left instead of margin-left as you are using absolute positioning.
HTML
<img class="a06a" src="http://i.imgur.com/JMCU8.jpg">
<img class="a06b" src="http://i.imgur.com/UjdNhhO.jpg">
<img class="a06c" src="http://i.imgur.com/KOfaU.jpg">
CSS
.a06a {
position:absolute;
z-index: 250;
}
.a06b {
position:absolute;
z-index: 260;
left: 50px;
}
.a06c {
position:absolute;
z-index: 270;
left: 100px;
}
Here is a nice and clean example to understand how it works
CSS
.box1, .box2, .box3 {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: red;
}
.box2 {
background: green;
left: 50px;
}
.box3 {
background: blue;
left: 100px;
}
.container {
position: relative;
}
HTML
<div class="conatiner">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
For something that you position absolute you should always have top and left defined.