I have a wrapper div that has some css property set. on click of a button i have to show an overly with some message.
<div class="dvLanding">
<div class="popupArea">
<span class="VoteOnce">You can only vote once.</span> <a style="vertical-align: top">
<img alt="close" src="../../Images/error1-exit-button.png" /></a></div></div>
</div>
my css classes.
.dvVoteWrapper
{
background-color: #949494;
opacity: 0.5;
filter: Alpha(opacity=50);
display:none;
width: 1024px;
height: 768px;
position: absolute;
}
.popupArea
{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.dvLanding
{
background-image: url(/Images/screen1-bg-logos.jpg);
background-repeat: no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
.VoteOnce
{
font-family: Calibri regular;
font-size: 24pt;
background-image: url(/Images/error1-vote-once-bg.png);
background-repeat: no-repeat;
width:288px;
height:74px;
color: #000000;
}
i am removing the display:none attribute with jquery. When applying this classes it is not covering the full page and looking distorted. kindly suggest how to do this. for better understanding i have attached the screen shots
Here's another one
HTML:
<div class="dvLanding">
<div class="dvVolunter"></div>
<div class="dvVote">
<br />
<br />
</div>
<div class="dvVoteWrapper"></div>
</div>
<div class="popupArea">
<span class="VoteOnce">You can only vote once.
<a class="closeButton">
<img alt="close" src="../../Images/error1-exit-button.png" />
</a>
</span>
</div>
CSS:
.dvLanding {
background-image: url(http://lorempixel.com/800/600);
position: absolute;
width: 100%;
height: 100%;
opacity: 0.5;
}
.popupArea {
background-color: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -180px;
}
.closeButton {
vertical-align: top;
font-size: 10pt;
}
.VoteOnce {
font-family: Calibri regular;
font-size: 24pt;
}
JSFiddle for testing.
If you want the wrapper to cover the whole screen you can use:
position:fixed; left:0; top:0; z-index:100; width:100%; height:100%;
Your z-index property will need to be higher than any of the elements below it that you are trying to cover
Related
In my photographic portfolio, I display a series of images of different ratio in tracks that automatically fill the width of the display. That is working perfectly... after receiving some help.
My ultimate objective is to permanently display a little heart over the top-left corner of each image AND display a semitransparent strip over the bottom of each image containing the caption only on mouseover the image.
I have almost achieved that result but I can not figure out after hours of trying how to overlay the 2 elements as explained above... so for now trhey are together on top of the image... which is not optimal.
So I would appreciate some help to achieve that result if possible.
Here is part of the code in question and a sample can be found on my website : TwoOverlaysOnImage.
CSS code
.my-flex-item {
background-color: #1d1d1d;
border: 2px solid #1d1d1d;
height: 100px;
}
.img-holder {
position: relative;
display: inline-block;
}
.img-holder p {
position: absolute;
display: inline-block;
text-align: left !important;
font-size: 0.7em !important;
width: 100%;
}
.img-holder:hover > p {
background-color: rgba(60,60,60,0.7);
text-align: center !important;
}
.img-holder span {
margin-top:40px;
color: white !important;
left: 30px;
}
HTML code
<div class="d-flex flex-row flex-wrap justify-content-center">
<div class="img-holder">
<p>
<img src="heart0.png" style="margin-left:6px; margin-top:4px;"/>
<span class="thumbCaption">caption</span>
</p>
<a href="modal...">
<img class="my-flex-item" src="imagepath..." alt="caption..." />
</a>
</div>
</div>
Try this:
html:
<div style="width: 100%; display: flex; justify-content: center;">
<div id="img-cont" class="img-cont">
<img class="heart" src="path/to/heart/icon">
<div class = "hover">
<p>Sample Text</p>
</div>
</div>
</div>
CSS:
.img-cont{
position: relative;
width: 420px;
height: 300px;
cursor: pointer;
background-size: cover;
background-image: url("https://images.unsplash.com/photo-1588876315093-ce09afb34028?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80")
}
.img-cont .heart{
position: absolute;
color: white;
top: 15px;
left: 15px;
cursor: pointer;
}
.hover{
clip-path: url(#img-cont);
position: absolute;
height: 0;
width: 100%;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
}
.img-cont:hover .hover{
height: 50%;
}
.hover p{
color: white;
}
.addcircle{
width:15%;
height:30px;
position:relative;
}
.addcircle:hover{
background: #1a1aff;
color:white;
}
.addcircle:hover a{
background: #1a1aff;
color:white;
}
.addcircle:after{
position: absolute;
z-index: 1;
left: 80%;
/* top: 0%; */
width: 30px;
height: 30px;
margin-top: 0px;
border-radius: 50%;
content: "";
}
.addcircle:hover:after{background: #1a1aff;}
<div id="main">
HOOVER LINK BELOW
<div class="addcircle">
some page
</div>
<div class="addcircle" style="width:20%">
some page 2
</div>
</div>
How to do same effect like main(1st link) for responsive width??
As you can see on example, 1st hover look nice but 2nd one not rly... any clue?
Because when i check for bigger or smaller screen my circle move some where.
Not gonna do all the work for you but it looks like you're over thinking it. You're already messing with border-radius which is the key:
a {
color: white;
padding: 5px;
border-radius: 0 1rem 1rem 0 ;
background-color: blue;
}
Some Page
<br/>
<br/>
Some Page 2
Depending on the needs of your application (will all lines fit on one line on all expected viewports?), applying this style on hover could be all you need.
As you can see below, I've used right property on .addcircle:after instead of left and used a fixed value of negative half of the width which is -15px this will lead to a semi-circle effect and the right side of your links, without regarding width of the element.
.addcircle{
width:15%;
height:30px;
position:relative;
}
.addcircle:hover{
background: #1a1aff;
color:white;
}
.addcircle:hover a{
background: #1a1aff;
color:white;
}
.addcircle:after{
position: absolute;
z-index: -1;
right: -15px;
width: 30px;
height: 30px;
margin-top: 0px;
border-radius: 50%;
content: "";
}
.addcircle:hover:after{
background: #1a1aff;
}
<div id="main">
HOOVER LINK BELOW
<div class="addcircle">
some page
</div>
<div class="addcircle" style="width:20%">
some page 2
</div>
</div>
However, there's no need to use a <div class="addcircle"> around your links. It's possible to implement exact same effect with only <a> elements.
a{
width:20%;
display: block;
height: 30px;
position:relative;
}
a:hover{
background: #1a1aff;
color:white;
}
a:after{
position: absolute;
z-index: -1;
right: -15px;
width: 30px;
height: 30px;
margin-top: 0px;
border-radius: 50%;
content: "";
}
a:hover:after{
background: #1a1aff;
}
<div id="main">
<span>HOOVER LINK BELOW</span>
some page
<a style="width: 50%" href="">some page 2</a>
</div>
Just add the display property to your .addcircle div:
.addcircle{
width:15%;
height:30px;
position:relative;
display: flex;
}
and for .addcircle:after change right position instead of left:
.addcircle:after{
position: absolute;
z-index: 1;
right: -12px;
width: 30px;
height: 30px;
margin-top: 0px;
border-radius: 50%;
content: "";
}
I am setting a wrapper to be full screen with a slight opacity. Within that wrapper I have another div which is to be centered on the screen. All works, but the opacity is being applied to the inner div (loading icon and some text).
The html cannot change in the sense that .dataTables_processing will always be a wrapper no matter what.
html:
<div class="dataTables_processing">
<div class="dataTables_processing_custom">
<i class="fa fa-spinner fa-spin"></i> Please wait...
</div>
</div>
css:
.dataTables_processing {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin-left: 0;
padding: 0;
background-color: #333;
opacity: 0.05;
cursor:wait;
z-index:9998;
}
.dataTables_processing_custom {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 30px;
margin-left: -100px;
text-align: center;
color:#3276b1;
font-size: 14px;
z-index:9999;
}
.dataTables_processing_custom i{
font-size:30px;
vertical-align:middle;
}
When the CSS style opacity is applied to the parent, it does it to all it's children, try using a RGBA method for a background instead:
.parent {
background: rgba(0,0,0,0.5);
}
I am trying to place a div with text on top of an image but for some reason it doesn't work. My code is:
<div id="pics">
<div class="inner">
<img src=".." class="pic" height="310" width="310">
<div class="cover">blah blah</div>
</div>
</div>
my CSS is:
#pics{
overflow:hidden;
display:block;
}
.inner a{
position:relative;
margin:3px;
padding:10px;
top:10px;
}
.inner{
position: relative;
display: inline-block;
}
.cover{
position: absolute;
background-color: black;
color: white;
left: 0;
right: 0;
bottom: 0;
top: 0px;
}
I have tried many things but it doesn't seem to work. I might have messed up my cs somewhere
That's because you're targetting an ID and not a class.
In other words, in the CSS you have the definition for an ID (#cover) and the HTML code has a class:
<div class="cover">blah blah</div>
Either change the HTML to have an ID:
<div id="cover">blah blah</div>
or change the CSS to target the class name:
.cover{
position: absolute;
background-color: black;
color: white;
width: 100%;
height: 100%;
border-style: solid 5px;
top: 0px;
}
UPDATE:
You are giving the .cover a width and height of 100%, but absolute positioned elements don't really "understand" that, so I suggest changing it to:
(place the left, bottom and right to the edges, this will fit the div as 100% width and height of the relative parent)
.cover{
position: absolute;
background-color: black;
color: white;
left: 0;
right: 0;
bottom: 0;
border-style: solid 5px;
top: 0px;
}
How about setting the picture as background via the background-image: attribute.
You then could make your div clickable with <div onclick="window.location="url";>
In detail your css would look like this:
.image {
width:310px;
height:310px;
background-image:url('pathtoimage');
}
I've created a counter with 4 digits, which need to be displayed in the bottom right corner of the page. Each digit has a block-image as 'background'.
It works in chrome, but not in IE7+ and FF..
HTML (I writed down only 1 digit, but there are 4):
<div id="container_bottom">
<div id="counters" <div id="counter_txt">Text:</div>
<div class="div_counter1">
<div class="div_counter2">
<img class="img-counter" src="counter_bg.png" />
</div>
<div class="div_counter3">
<span class="counter"><?php echo $counter[1]; ?></span>
</div>
</div>
</div>
CSS:
#container_bottom {
width: 100%;
min-width: 800px;
display: inline-block;
position: absolute;
margin-top: 150px;
_width: 800px;
}
#counters {
float: right;
margin-right: 5px;
}
.div_counter1 {
display: inline-block;
}
.div_counter2 {
display: inline-block;
}
.div_counter3 {
display: inline-block;
position: absolute;
margin-left: 8px;
top: 0px;
}
.counter {
font-size: 36px;
color: #ffffff;
}
#counter_txt {
font: 16px Segoe Print;
color: #0c3348;
display: inline-block;
position: absolute;
right: 180px;
top:10px;
}
It looks like you might have overcomplicated what you are trying to do seems to be something like this
HTML
<div id="container_bottom">
<span class="counter_text">Text here:</span>
<span class="counter_holder">0</span>
<span class="counter_holder">0</span>
<span class="counter_holder">0</span>
<span class="counter_holder">6</span>
</div>
CSS
#container_bottom{
position:absolute;
bottom:20px;
right:20px;
}
#container_bottom .counter_holder{
display:inline-block;
background-color:green;
width:30px;
height:35px;
text-align:center;
font-size:30px;
border:1px solid black;
-moz-border-radius: 5px;
border-radius: 5px;
/* background-image: url(''); // add image here if needed*/
}
#container_bottom .counter_text{
/* add css here if needed */
}
jsFiddle Here