When I mouse hover the image my REGISTER HERE link is getting hidden.
I don't want hover effect on it but i want that link on the same position below the image.
.image {
position:relative;
display:inline-block;
margin:10px;
}
.overlay {
display:none;
}
.image:hover .overlay {
width:100%;
height:100%;
background:rgba(0,0,0,.5);
border:10px solid red;
position:absolute;
top:0;
left:0;
display:inline-block;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
text-align:center;
color:white;
padding:12px;
font-size:20px;
}
img {
vertical-align:top;
}
<a href="#" class="course">
<div class="image">
<figure>
<img src="http://placekitten.com/250/200" width="100%" height:"100%">
<div class="overlay">Click on the Register Here to know about the:-
<ul>
<li>Oracle</li>
<li>Automated Testing</li>
</ul>
</div>
<figcaption>Register Here</figcaption>
</figure>
</div>
</a>
Added below style -
.course{
position: relative;
display: block;
}
.image {
position: relative;
display: inline-block;
margin: 10px;
}
.overlay {
display: none;
}
.image a:hover .overlay {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
border: 10px solid red;
position: absolute;
top: 0;
left: 0;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
color: white;
padding: 12px;
font-size: 20px;
pointer-events:none;
}
img {
vertical-align: top;
}
.course{
position: relative;
display: block;
}
<a href="#" class="course">
<div class="image">
<figure>
<img src="http://placekitten.com/250/200" width="100%" height: "100%">
<div class="overlay">Click on the Register Here to know about the:-
<ul>
<li>Oracle</li>
<li>Automated Testing</li>
</ul>
</div>
<figcaption>Register Here
</figcaption>
</figure>
</div>
</a>
Related
I'm asking for your help, it took half a day to try, but it didn't work.
I have a popup window that doesn't appear on top of the content on the page, but under it.
How can I fix this?
Also, can you please give me some advice about the text over the picture, maybe I did something wrong?
My code of single card:
<div class="card_cat">
<div class="image">
<img class="card_cat__image" src="{{ item.image.url }}" width="300" height="250" alt="" />
<a href="{% url 'products_retail_by_category' slug=item.slug %}">
<div class="card_cat_title">
{{ item.title }}
</div>
</a>
</div>
</div>
Pop-up:
<div id="popup__cart" class="popup__cart">
<div class="popup__cart__body">
<div class="popup__cart__content">
<a href="##" class="popup__cart__close">
<i class="fas fa-times-circle fa-2x"></i>
</a>
</div>
</div>
</div>
CSS:
.card_cat {
position:relative;
font-size:17px;
font-weight: lighter;
font-style: normal;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-clip: border-box;
border-radius: .25rem;
}
.card_cat__image {
display: flex;
justify-content: center;
align-items: center;
filter: brightness(95%);
width: 275px;
height: 275px;
}
.card_cat_title {
position: absolute;
width: 230px;
height: 28px;
left: 22.5px;
top: 123.5px;
text-align: center;
}
.popup__cart {
position:fixed;
width:100%;
height:100%;
background-color:rgba(0, 0, 0, 0.8);
top:0;
left:0;
opacity:0;
visibility:hidden;
overflow-y: auto;
overflow-x:hidden;
transition: all 0.3s ease 0s;
}
.popup__cart:target {
opacity:1;
visibility:visible;
}
.popup__cart__body {
min-height:100%;
display:flex;
align-items:center;
justify-content:center;
padding: 30px 10px;
}
.popup__cart__close {
position:absolute;
right:20px;
top:20px;
}
.popup__cart__content {
background-color:#fff;
color:#000;
max-width:800px;
padding:30px;
position:relative;
Thank you very much!
try this z-index:999; in pop-up
I am left with 2 labels and can't find solution.
I have done this much HTML and CSS
<div id="incoming_call" class="bottom_toolbar_incoming_call" style="bottom:90px; position: fixed; right: 3px; z-index: 9999; height:45px; width:250px; background-color:lightgray;">
<img src="http://findicons.com/files/icons/766/base_software/128/circle_red.png" alt="Answer" style=" width:40px; height:40px; display: inline-block; padding:2px; left:200px; position: relative;" id="Reject" />
<img src="http://findicons.com/files/icons/766/base_software/128/circle_green.png" alt="Answer" style=" width:40px; height:40px; display: inline-block; padding:2px; left:100px; position: relative;" id="answer" />
</div>
I would put the images inside a position:absolute div like this
#incoming_call{
border: 2px solid black;
}
#call{
color:green;
}
#images{
position:absolute;
top:0px;
}
<div id="incoming_call" class="bottom_toolbar_incoming_call" style="bottom:90px; position: fixed; right: 3px; z-index: 9999; height:45px; width:250px; background-color:lightgray;">
<div id="call">call from 7040</div>
<div id="time">0:01</div>
<div id="images">
<img src="http://findicons.com/files/icons/766/base_software/128/circle_red.png" alt="Reject" style=" width:40px; height:40px; display: inline-block; padding:2px; left:200px; position: relative;" id="Reject" />
<img src="http://findicons.com/files/icons/766/base_software/128/circle_green.png" alt="Answer" style=" width:40px; height:40px; display: inline-block; padding:2px; left:100px; position: relative;" id="answer" />
</div>
</div>
Try this way:
Takes care of vertical alignment (as it appears in your design)
Content height adjusts according to adjacent column
No browser issues as well
Red and Green color using CSS - Hence no images required
.parent-container {
width: 320px;
}
.box {
border: 2px solid #000;
display: table;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.box__cell {
display: table-cell;
width: 50%;
vertical-align: middle;
padding: 0 15px;
}
ul {
padding: 0;
list-style-type: none;
}
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid #000;
}
.b-red {
background: red;
}
.b-green {
background: green;
}
.t-green {
color: green;
}
.text-right {
text-align: right;
}
.list-item li {
display: block;
}
.list-inline li {
display: inline-block;
}
<div class="parent-container">
<div class="box">
<div class="box__cell box__cell--left">
<div id="incoming_call">
<ul class="list-item">
<li class="t-green">Incoming Call</li>
<li><b>00: 05</b></li>
</ul>
</div>
</div>
<div class="box__cell box__cell--left">
<ul class="list-inline text-right">
<li class="circle b-red">
</li>
<li class="circle b-green">
</li>
</ul>
</div>
</div>
</div>
I am trying to create my header. Which includes a Logo (left), Banner (center) and NavBar (Right). I can get them level with each other but cannot get the banner to sit perfectly central of the page.
The banner is pushed over towards the right, sitting approximately 70% of the way across the screen.
Any ideas as to why this may be happening?
#header1 {
position: absolute;
width: 100%;
height: 100px;
text-align: center;
margin: 0px;
padding-top: 2px;
padding-right: 2px;
padding-left: 2px;
padding-bottom: 2px;
color: white;
font-size: 18px;
background-image: url(content/structure/fmabannerbehind.jpg);
background-position: center;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-style: italic;
}
#logo {
margin-left: 0px;
height: 100px;
width: 200px;
float: left;
border-color: red;
border-width: 3px;
border-style: solid;
}
#logo img {
height: 100px;
width: auto;
}
#banner {
position: absolute;
height: 100px;
width: auto;
display: inline-block;
margin: 0 auto;
border-color: red;
border-width: 3px;
border-style: solid;
}
#banner img {
height: 100px;
width: auto;
}
#menu1 {
margin-right: 0px;
height: 100px;
width: auto;
float: right;
border-color: red;
border-width: 3px;
border-style: solid;
}
<div id="header1">
<div id="logo">
<a href="http://www.fmarchived.com">
<img src="/content/structure/logo3.jpg" alt="logo">
</a>
</div>
<div id="banner">
<a href="/">
<img src="/content/structure/fmabanneronly.jpg" alt="banner">
</a>
</div>
<div id="menu1">
<div class="child2menu">
<ul>
<li>About Us
</li>
<li>Facebook
</li>
<li>Twitter
</li>
<li>Youtube
</li>
</ul>
</div>
</div>
</div>
UPDATE
Perhaps I should have explained better, I want the banner to be center
of the entire page, regardless of what the other divs are doing
Then add position:relative to #header1 and position:absolute + display: inline-table; position:absolute; left:0; right:0;
margin:auto; to #banner in both snippets
Option#1 - using CSS flexbox
Using justify-content: space-between from flexbox you can do this, and simplify a lot your code
* {
box-sizing: border-box;
margin: 0
}
#header1 {
display: flex;
justify-content: space-between;
position: relative
}
#header1 > div {
border: solid red
}
img {
vertical-align: bottom
}
#banner {
display: inline-table;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
<div id="header1">
<div id="logo">
<a href="http://www.fmarchived.com">
<img src="//lorempixel.com/200/100" alt="logo">
</a>
</div>
<div id="banner">
<a href="/">
<img src="//lorempixel.com/100/100" alt="banner">
</a>
</div>
<div id="menu1">
<div class="child2menu">
<ul>
<li>About Us
</li>
<li>Facebook
</li>
<li>Twitter
</li>
<li>Youtube
</li>
</ul>
</div>
</div>
</div>
Option#2 - using your current code
Change position:absolute from #header1 to relative to remove scrollbars
* {
box-sizing: border-box;
margin: 0
}
#header1 {
position: relative;
width: 100%;
height: 100px;
text-align: center;
margin: 0;
padding: 2px;
color: white;
font-size: 18px;
background-image: url(content/structure/fmabannerbehind.jpg);
background-position: center;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-style: italic;
}
#header1 > div {
border: 3px solid red
}
img {
height: 100px;
width: auto;
vertical-align:bottom
}
#logo {
margin-left: 0;
width: 200px;
float: left;
}
#banner {
width: auto;
display: inline-table;
position:absolute;
left:0;
right:0;
margin:auto;
}
#menu1 {
margin-right: 0px;
float: right;
}
<div id="header1">
<div id="logo">
<a href="http://www.fmarchived.com">
<img src="//lorempixel.com/100/100" alt="logo">
</a>
</div>
<div id="banner">
<a href="/">
<img src="//lorempixel.com/100/100" alt="banner">
</a>
</div>
<div id="menu1">
<div class="child2menu">
<ul>
<li>About Us
</li>
<li>Facebook
</li>
<li>Twitter
</li>
<li>Youtube
</li>
</ul>
</div>
</div>
</div>
Remove the position: absolute property from the #banner div. If the #banner div needs to be absolutely positioned for some reason, you can center it by giving it a width and appropriateleft attribute instead.
Just remove the position absolute and it will align to the center.
#banner {
/*position:absolute;*/
height: 100px;
width: auto;
display: inline-block;
margin:0 auto;
border-color: red;
border-width: 3px;
border-style: solid;
}
you can use coordonates and margin: auto; to center your boxe if tou use absolute . but you need to reset display .
#banner {
position: absolute;
height: 100px;
width: auto;
display: table;/* shrinks on content */
left:0;
right:0;
margin: 0 auto;/* will center in between coordonates if boxe smaller */
border-color: red;
border-width: 3px;
border-style: solid;
}
run code snippet bellow:
#header1 {
position: absolute;
width: 100%;
height: 100px;
text-align: center;
margin: 0px;
padding-top: 2px;
padding-right: 2px;
padding-left: 2px;
padding-bottom: 2px;
color: white;
font-size: 18px;
background-image: url(content/structure/fmabannerbehind.jpg);
background-position: center;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-style: italic;
background:linear-gradient(to right,gray 50%, lightgray 50%);
}
#logo {
margin-left: 0px;
height: 100px;
width: 200px;
float: left;
border-color: red;
border-width: 3px;
border-style: solid;
}
#logo img {
height: 100px;
width: auto;
}
#banner {
position: absolute;
height: 100px;
width: auto;
display: table;
margin: 0 auto;
left:0;
right:0;
border-color: red;
border-width: 3px;
border-style: solid;
}
#banner img {
height: 100px;
width: auto;
}
#menu1 {
margin-right: 0px;
height: 100px;
width: auto;
float: right;
border-color: red;
border-width: 3px;
border-style: solid;
}
<div id="header1">
<div id="logo">
<a href="http://www.fmarchived.com">
<img src="/content/structure/logo3.jpg" alt="logo">
</a>
</div>
<div id="banner">
<a href="/">
<img src="/content/structure/fmabanneronly.jpg" alt="banner">
</a>
</div>
<div id="menu1">
<div class="child2menu">
<ul>
<li>About Us
</li>
<li>Facebook
</li>
<li>Twitter
</li>
<li>Youtube
</li>
</ul>
</div>
</div>
</div>
I am trying to get text to display under my overlapping images. I have two images side by side which are to be voted on so the "VS" image overlaps the other two images in the middle which works perfectly. When I try to get text to display under each image to be voted on, however, it seems to display towards the top behind the images, not underneath as it would normally.
Here's a codepen of what it does at the moment:
http://codepen.io/anon/pen/qdemaz
html:
<div align="center">
<div id="vs">
<img id="png1" src="/puppies/8.jpg" /><p
class="left">username<br>Description<br>Puppies name</p>
<img id="png2" src="/images/vs.png" />
<img id="png3" src="/puppies/8.jpg" /><p
class="right">username<br>Description<br>puppies name</p>
</div>
</div>
css:
#png1 {
position:absolute;
top:30px;
left:0;
z-index:0;
}
#png2 {
position:absolute;
top:100px;
left:260px;
z-index:1;
}
#png3 {
position:absolute;
top:30px;
left:315px;
z-index:0;
}
#vs{
position: relative;
width: 620px;
height: 310px;
}
p.left{
position:absolute;
top:315px;
left:0px;
z-index:4;
text-align:left;
}
p.right{
position:absolute;
top:315px;
left:315px;
z-index:4;
text-align:left;
}
I think I see what you're looking to do. You're setup isn't the best. I reworked the HTML/CSS, is this what you want:
http://codepen.io/anon/pen/pJMeGr
a{
display: inline-block;
vertical-align: top;
position: relatve;
z-index: 9;
}
img{
display: inline-block;
border: 1px solid #333;
}
.left{
margin-right: -15px;
}
.right{
margin-left: -10px;
}
#vs{
text-align: center;
}
.vs{
display: inline-block;
vertical-align: top;
position: relative;
z-index: 10;
border: 1px solid #000;
margin-top: 8px;
}
<div>
<div id="vs">
<a class="left" href="#"><img src="http://placehold.it/120x120" />
<br>puppies name
<br>username
<br>Description
</a>
<img class="vs" src="http://placehold.it/100x100" />
<a class="right" href="#"><img src="http://placehold.it/120x120" />
<br>puppies name
<br>username
<br>Description
</a>
</div>
</div>
I'll provide CSS and HTML sources first.
jsFiddle
The live example is here
The problem is, h2 texts are not visible unless I do z-index: -1; on images. It makes the text appear, however, then the image is being lost and I look at body background.
There is not something touching z-index values except the fixed navigation bar at top.
What may be causing this, can you have a look?
Ps. Writing z-index: 2; on H2 tags doesn't work either.
If you want z-index:2 on <h2> works, you should add position:relative; or position:absolute; or position:fixed.
You can see z-index
i change your HTML & CSS
change in HTML: Move img into a tag
<div class="spotlight-area">
<div class="spotlight">
<div class="spotlight-item width-2 height-2">
<a href="#" class="spotlight-info">
<h2 class="large">
Random text
</h2>
<img src="http://www.sobafire.com/__v2/themes/default/images/news/spotlight-big.jpg" alt="haber">
</a>
</div>
<div class="spotlight-item width-1 height-1">
<a href="#" class="spotlight-info">
<h2>
Random Text
</h2>
</a>
<img src="http://i.imgur.com/TAxDMus.jpg" alt="haber">
</div>
<div class="spotlight-item width-1 height-1">
<a href="#" class="spotlight-info">
<h2>
Random Text
</h2>
<img src="http://i.imgur.com/TAxDMus.jpg" alt="haber">
</a>
</div>
<div class="spotlight-item width-1 height-1">
<a href="#" class="spotlight-info">
<h2>
Random Text
</h2>
<img src="http://i.imgur.com/TAxDMus.jpg" alt="haber">
</a>
</div>
<div class="spotlight-item width-1 height-1">
<a href="#" class="spotlight-info">
<h2>
Random Text
</h2>
<img src="http://i.imgur.com/TAxDMus.jpg" alt="haber">
</a>
</div>
<div class="spotlight-item width-1 height-1">
<a href="#" class="spotlight-info">
<h2>
Random Text
</h2>
<img src="http://i.imgur.com/TAxDMus.jpg" alt="haber">
</a>
</div>
</div>
</div>
css:
change On CSS: Remove position: absolute; From img and ADD It TO .spotlight-area .spotlight .spotlight-item:hover .spotlight-info h2 Remove padding From .spotlight-area .spotlight-info { and Add Margin to .spotlight-area .spotlight .spotlight-item:hover .spotlight-info h2 with similar value
.spotlight-area {
width: 790px;
margin: 0px auto;
padding: 0px;
}
.spotlight-area img, .spotlight-area embed {
max-width: 100%;
height: auto;
min-height: 50px;
}
.spotlight-area .spotlight {
display: block;
border-top: 1px solid #3b3b3b;
border-left: 1px solid #3b3b3b;
float: left;
margin-bottom: 4px;
}
.spotlight-area .spotlight .width-1 { width: 262px }
.spotlight-area .spotlight .width-2 { width: 525px }
.spotlight-area .spotlight .height-1 { height: 174px }
.spotlight-area .spotlight .height-2 { height: 349px }
.spotlight-area .spotlight .spotlight-item {
float: left;
position: relative;
border-bottom: 1px solid #3b3b3b;
border-right: 1px solid #3b3b3b;
overflow: hidden;
}
.spotlight-area .spotlight .spotlight-item:hover .spotlight-info h2 {
color: #ffc203;
}
.spotlight-area .spotlight .spotlight-item img {
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
border: 0;
z-index: -1; /* tricky part */
}
.spotlight-area .spotlight-info {
display: block;
height: 100%;
min-height: 50px;
}
.spotlight-area .spotlight-info a {
display: block;
height: 100%;
min-height: 50px;
padding: 20px;
}
.spotlight-area .spotlight .spotlight-item .spotlight-info h2 {
display: inline-block;
max-width: 480px;
font-size: 30px;
line-height: 32px;
color: #f0f0f0;
position: absolute;
margin:20px;
}
in My Test This Change work