I'm using jQuery to show http://ajaxload.info/ icon.
$(".modal").show();
<div class="modal"></div>
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 ) url('http://i.stack.imgur.com/FhHRx.gif') 50% 50% no-repeat;
}
I want to add some text below the icon. I've tried having new div inside class="modal" div but it doesn't work because what I need is to add the text on the background.
How can I had text below the background image?
If it were me, I wouldn't use the background image. I would do something like this:
<style>
.modal {
position: fixed;
text-align:center;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255,255,255, .8 )
}
.modal::before {
margin: auto;
display:block ;
text-align: center;
content: url('http://i.stack.imgur.com/FhHRx.gif');
}
</style>
<div class="modal"><p>Content loading</p></div>
Here' a working fiddle: https://jsfiddle.net/hsyprw2m/2/
Related
I am trying to achieve something like this:
When I hover over an image, I would like to put on that image this dark color with some text and the icon.
I am stuck here. I found some tutorials but they didn't work out for this case.
Also, another issue -- every image has a different height. The width is always the same.
How can this effect be achieved?
You can achieve this with this simple CSS/HTML:
.image-container {
position: relative;
width: 200px;
height: 300px;
}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
}
HTML
<div class="image-container">
<img src="http://lorempixel.com/300/200" />
<div class="after">This is some content</div>
</div>
Demo: http://jsfiddle.net/6Mt3Q/
UPD: Here is one nice final demo with some extra stylings.
.image-container {
position: relative;
display: inline-block;
}
.image-container img {display: block;}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
}
.image-container .after .content {
position: absolute;
bottom: 0;
font-family: Arial;
text-align: center;
width: 100%;
box-sizing: border-box;
padding: 5px;
}
.image-container .after .zoom {
color: #DDD;
font-size: 48px;
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -19px;
height: 50px;
width: 45px;
cursor: pointer;
}
.image-container .after .zoom:hover {
color: #FFF;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="image-container">
<img src="http://lorempixel.com/300/180" />
<div class="after">
<span class="content">This is some content. It can be long and span several lines.</span>
<span class="zoom">
<i class="fa fa-search"></i>
</span>
</div>
</div>
You could use a pseudo element for this, and have your image on a hover:
.image {
position: relative;
height: 300px;
width: 300px;
background: url(http://lorempixel.com/300/300);
}
.image:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transition: all 0.8s;
opacity: 0;
background: url(http://lorempixel.com/300/200);
background-size: 100% 100%;
}
.image:hover:before {
opacity: 0.8;
}
<div class="image"></div>
Putting this answer here as it is the top result in Google.
If you want a quick and simple way:
filter: brightness(0.2);
*Not compatible with IE
A bit late for this, but this thread comes up in Google as a top result when searching for an overlay method.
You could simply use a background-blend-mode
.foo {
background-image: url(images/image1.png), url(images/image2.png);
background-color: violet;
background-blend-mode: screen multiply;
}
What this does is it takes the second image, and it blends it with the background colour by using the multiply blend mode, and then it blends the first image with the second image and the background colour by using the screen blend mode. There are 16 different blend modes that you could use to achieve any overlay.
multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity.
.bg-img{
text-align: center;
padding: 130px 0px;
width: 100% !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.86)), url(your-img-path);
}
Can i change:
into:
without using a photo editor
Here Is CSS and HTML code
I couldn't upload the logo because i should have at least 10 reputation to post more than 2 links so i maybe insert it in another comment
header {
background-color: rgba(255, 255, 255, 0.9);
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
position: fixed;
width: 100%;
box-sizing: border-box;
top: 0;
left: 0;
z-index: 2;
}
header .logo {
position: fixed;
left: 50%;
top: 13px;
display: inline-block;
}
.background-image {
position: fixed;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background: #fff url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/%D0%94%D0%B7%D0%B5%D0%BC%D0%B1%D1%80%D0%BE%D0%BD%D1%8F._%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D0%BB%D1%83%D1%87%D0%B8_%D1%81%D0%BE%D0%BB%D0%BD%D1%86%D0%B0.jpg/800px-%D0%94%D0%B7%D0%B5%D0%BC%D0%B1%D1%80%D0%BE%D0%BD%D1%8F._%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D0%BB%D1%83%D1%87%D0%B8_%D1%81%D0%BE%D0%BB%D0%BD%D1%86%D0%B0.jpg') no-repeat center center;
background-size: 100%;
}
<body>
<header>
<div class="header-section logo">
<a href="/">
<img src="http://i.imgur.com/IB1gfZB.png" alt="...">
</a>
</div>
</header>
<div class="background-image"></div>
</body>
You can use opacity to create a semi-opaque image, and you may be fine with that by adjusting it to whatever you need.
But if you also want to change the color of the image darker, you can use CSS filters. You can make it darker/maroon/brown-ish by adjusting the hue. It's worth noting the browser support - https://caniuse.com/#feat=css-filters
header {
background-color: rgba(255, 255, 255, 0.9);
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
position: fixed;
width: 100%;
box-sizing: border-box;
top: 0;
left: 0;
z-index: 2;
}
header .logo {
position: fixed;
left: 50%;
top: 13px;
max-width: 100%;
opacity: .7;
position: absolute;
top: 0; left: 0;
-webkit-filter: hue-rotate(45deg);
filter: hue-rotate(45deg);
}
.background-image {
position: fixed;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background: #fff url(http://environment.umn.edu/wp-content/uploads/2016/04/global_landscapes_initiative_directory_pages.jpg) no-repeat center center;
}
<body>
<header>
<div class="header-section logo">
<a href="/">
<img src="http://i.imgur.com/IB1gfZB.png" alt="...">
</a>
</div>
</header>
<div class="background-image"></div>
</body>
looks like a one time thing - i.e. it being a logo and all - It's just a lot easier to do such a thing with Photoshop.
I up-voted Michael's answer since I believe that's as close as you can get with CSS alone. Unless there's some "hacky" way to do this.
My method:
Use Photoshop.
Then add the photo as the background image of a one of the pseudo-elements for your header div / img
I created a sample below of the expected end result.
I encoded the overlay image as Base64 since it's only 1kb in size. It should be checked with your CSS file. Read more about Base64
You can control the opacity of the pseudo-element.
.content {
width: 100%;
max-width: 100%;
height: 500px;
position: relative;
background: url(https://unsplash.it/800/310) no-repeat
}
.content::before {
content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: .25;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA3AAAAExCAMAAAAKr7AFAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURQAAAP///v///v///yYLV3kAAAADdFJOUwB6xLOvUwsAAAN0SURBVHja7d3BroMgEEBRBv7/n7vsRqGMSGo8Zzs7zY0vhOkrDdimeAQgOBAcIDgQHCA4EBwIDhAcCA4QHAgOBAcIDgQHCA4EBwgOBAeCAwQHggMEB4IDwQGCA8EBggPBAYIDwYHgAMGB4ADBgeBAcIDgQHCA4EBwgOBAcCA4QHAgOEBwIDgQHCA4EBwgOBAcCA4QHAgOEBwIDhAcCA4EBwgOBAcIDgQHggMEB4IDBAeCAwQHggPBAYIDwQGCA8GB4ADBgeAAwYHgAMGB4EBwgOBAcIDgQHAgOEBwIDhAcCA4EBwgOBAcIDgQHCC4J6pxYjiM3hDBcSTKsRgOT2aleqiCQ3CCQ3AITnCCExx3vadOUzU1FJzgmA6u9poafv0QHFPBNcEJDsEhOMEJTnD8JDJNCU5wrP3AxbUhgmP2L8oLQwSH4ASH4BDca9T0IWUVnOCY1T2HLOkhgmMmuPHtZDcpBYfgBIfgEByCExyb5RfeQnCCY1lww6GblIJDcIJDcAgOwQmO3fLbcJZzBMf8S0of/DukFBzLgrs4RHAITnAIDsG9Rk2fmYTgBMcs23CC4w+Cy19d9kwFh+AEh+AQnOAEJzhukl94c0gpONYFN/z6ubosOAQnOASH4BCc4Nj+itILb7bhBMey4IZD/1dAcAhOcAgOwSE4wbHb+l8Q8s4Fx/QHzjac4NgYXP4nuzxTwSE4wSE4BCc4wQmOm+S24VqzDSc4VgbXa8rVZcEhOAQnOATHVwhOcGx8QdltuGobTnAsC244dHVZcAhOcAgOwSE4wfGIMxPLOYIDBAeCA8EBggPBAYIDwYHgAMGB4ADBgeBAcIDgQHCA4EBwgOBAcCA4QHAgOEBwIDgQHCA4EBwgOBAcIDgQHAgOEBwIDhAcCA4EBwgOBAcIDgQHCA4EB4IDBAeCAwQHggPBAYIDwQGCA8GB4ADBgeAAwYHgAMGB4EBwgOBAcIDgQHAgOEBwIDhAcCA4QHAgOBAcIDgQHCA4EBwIDhAcCA4QHAgOEBwIDgQHCA4EBwgOBAeCAwQHggMEB4IDwXkEIDgQHCA4EBwgOBAcCA4QHAgOEBwIDgQHCA4EBwgOBAcIDgQHggMEB4IDBAeCA8EBggPBAYIDwQGCA8GB4ADBgeAAwYHgQHCA4EBwgOBAcIDgQHAgOEBwIDjgwAeC1hN7ntJexAAAAABJRU5ErkJggg==')
}
<div class="content"></div>
I've been working on placing a javascript magnifying glass on site.
I need help positioning the images in a straight horizontal line, right next to each other, with no white space in between. Setup must also be centered in middle of page.
Like this: http://s17.postimg.org/6nwizreov/Screenshot.png
Code: http://jsfiddle.net/NightSpark/dtsqcpv8/
(The two js files and css are from magnifier.js, by Mark Rolich)
Thanks
.magnifier-thumb-wrapper {
position: relative;
display: block;
top: 0;
left: 0
}
.magnifier-lens {
position: absolute;
border: solid 1px #ccc;
z-index: 1000;
top: 0;
left: 0;
overflow: hidden
}
.magnifier-loader {
position: absolute;
top: 0;
left: 0;
border: solid 1px #ccc;
color: #fff;
text-align: center;
background: transparent;
background: rgba(50, 50, 50, 0.5);
z-index: 1000;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F323232,endColorstr=#7F323232)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F323232,endColorstr=#7F323232)
}
.magnifier-loader-text {
font: 13px Arial;
margin-top: 10px
}
.magnifier-large {
position: absolute;
z-index: 100
}
.magnifier-preview {
padding: 0;
width: 100%;
height: 150px;
position: relative;
overflow: hidden
}
.magnifier-preview img {
position: absolute;
top: 0;
left: 0
}
.opaque {
opacity: .5;
filter: alpha(opacity=50);
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50)
}
.hidden {
display: none
}
demo - http://jsfiddle.net/dtsqcpv8/2/
adding this you can center it replace body with the parent of the element
body{
text-align:center;
}
.cont{
display:inline-block;
}
I was trying to show a gif on my page and succeeded in showing it.
But now i want to show two gifs next to each other.
I was wondering is it possible to do so.
CSS
#loader {
position: fixed;
z-index: 1000;
margin-left: 0%;
margin-top: 0%;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 ) url('../Images/loading.gif') 50% 50% no-repeat;
}
HTML
<div id="loader"></div>
Jquery
$(window).load(function () {
$('#loader').fadeOut(500);
});
Now can i add one more gif in background using url???
I tried following but it does not seem to work
#loader {
position: fixed;
z-index: 1000;
margin-left: 0%;
margin-top: 0%;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 ) url('../Images/loading.gif') , url('../Images/ajax-loader.gif') 50% 50% ;
}
Check the fiddle
HERE
Code
div#loader {
background-image: url('http://www.misd.gov.sc/misdsd/Assets/programmer.gif'), url('http://www.misd.gov.sc/misdsd/Assets/programmer.gif');
background-repeat: repeat-y;
background-position: top left, top right;
width: 385px;
height: 100px;
border: 1px solid #000000;
}
You can have an element like this:
<div id="loader">
<span id='loadtxt'></span>
</div>
then two css classes like this:
#loader {
position: fixed;
z-index: 1000;
margin-left: 0%;
margin-top: 0%;
height: 100%;
width: 100%;
background: url('http://i837.photobucket.com/albums/zz296/sayalie30/loading.gif') 50% 50% no-repeat;
}
#loadtxt {
position: fixed;
z-index: 1000;
margin-left: 0%;
margin-top: 0%;
height: 100%;
width: 100%;
background: url('http://lotyd.xtgem.com/images/bg-loading.gif') 50% 70% no-repeat;
}
you can adjust it as per your need.
CSS3 does support multiple backgrounds (http://www.css3.info/preview/multiple-backgrounds/)
check out the examples below
I am making a pop up on one of my project.
CSS Code
<style type="text/css">
#modalPage
{
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: rgba(0, 0, 0, 0.95);
z-index: 999;
}
.modalContainer
{
position: absolute;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
z-index: 999;
}
</style>
Content CSS
.modal
{
background-color: #6f9255;
position: relative;
top: -300px;
left: -305px;
z-index: 1000;
width: 600px;
overflow:auto;
}
JAVASCRIPT Code
<script type="text/javascript">
function myFunction() {
document.getElementById('modalPage').style.display = "block";
}
function hideModal()
{
document.getElementById('modalPage').style.display = "none";
}
</script>
HTML Code
<div id="modalPage">
<div class="modalContainer">
<div class="modal"> </div>
</div>
</div>
But the problem is that, it is fine but the opacity or page background which I putting on it, it is displaying on half page, not on full page.
Displaying by this code. background-color: rgba(0, 0, 0, 0.95);
Please tell me, where is the problem.
I can't keep the position fixed, because my pop up is longer then original page size and it is coming with scroll and cross the footer link too.
Any help will be appreciated.
Thanks
I think the problem is not related with an opacity issue. You say that your .modalContainer is 100% width and height but you start it at 50% top left. So the whole thing is 150% width and height, while #modalPage is only 100% width and height.
If you know the exact width and height of your container I suggest you to simply modify your css to center propertly the container. For example:
.modalContainer
{
position: absolute;
width: 50%;
height: 50%;
left: 25%;
top: 25%;
z-index: 999;
background-color: red; /*added to see where the container is*/
}
Working example:
http://jsfiddle.net/L2cXP/
If you want a modal longer than the page itself, i suggest a new approach.
We can ignore vertical centering because the modal is longer than the page. We just want that #modalPage has a overflow: auto property so it will show a scrollbar when its contents are longer than it.
Probably you would like to add an overflow: hidden property to the body when the modal shows to block the standard scrollbar of your page.
Check this working example:
http://jsfiddle.net/L2cXP/1/
try:
#modalPage {
position: fixed;
}
http://jsfiddle.net/68Sty/
.modalContainer has a "left" of 50%, so starting at halfway is expected. Try something like:
.modalContainer {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
right:0;
bottom:0;
z-index: 999;
}
try this
<div id="modalPage">
<div class='relative'>
<div class="modalContainer">
<div class="modal"> </div>
</div>
</div>
</div>
your css
.relative{
position:relative;
zoom:1;
height:100%;
width:100%;
}
A little CSS magic - and we have simple and nice CSS popups with no javascript positioning! consider this demo:
HTML:
<div id="modalPage" class="csspopup-overlay">
<div class="modalContainer csspopup-popup">
<div class="csspopup-close" onclick="hideModal()">×</div>
<div class="modal">Some modal content</div>
</div>
</div>
I define .csspopup-overlay and .csspopup-popup in CSS as follows:
.csspopup-overlay {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
text-align: center;
}
.csspopup-overlay:after, .csspopup-valignfix {
display: inline-block;
*display: inline;
*zoom: 1;
height: 100%;
width: 0;
vertical-align: middle;
content: '';
}
.csspopup-popup {
display: inline-block;
*display: inline;
*zoom: 1;
position: relative;
max-width: 80%;
padding: 15px;
box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3);
background: #FFF;
vertical-align: middle;
border-radius: 6px;
}
.csspopup-popup > .csspopup-close {
display: block;
position: absolute;
top: -15px;
right: -12px;
width: 12px;
height: 12px;
padding: 4px;
border: 4px solid #fff;
border-radius: 50%;
box-shadow: inset 0 2px 2px 2px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, .4);
cursor: pointer;
background: #555;
color: #FFF;
text-align: center;
font-size: 12px;
line-height: 12px;
text-decoration: none;
font-weight: bold
}
Demo: http://jsfiddle.net/acA73/
Note: I extracted these CSS for you from https://github.com/dfsq/cssPopup jQuery plugin.