Trying to float a box on the bottom of this image slider. Essentially the slider will have a title and caption but I also want to have a box at the bottom of the image which will pull in data using PHP.
Anyway, my problem is trying to get the white box with text to sit on the bottom of the image and stay there. If the user decreases screen size the white box should follow and stay on the bottom.
jsFiddle provided: http://jsfiddle.net/fkpe1py6/1/
<div id="homepage-slider-wrap" class="clr flexslider-container">
<div id="homepage-slider" class="flexslider">
<ul class="slides clr">
<li class="homepage-slider-slide">
<div class="homepage-slide-inner container">
<div class="homepage-slide-content">
<div class="homepage-slide-box">Float this box at the bottom of the image.</div>
</div>
<!-- .homepage-slider-content -->
</div>
<img src="http://wpexplorer-demos.com/elegant/wp-content/uploads/sites/83/2012/08/game.jpg" alt="">
</li>
</ul>
<!-- .slides -->
</div>
<!-- .flexslider -->
</div>
<!-- #homepage-slider" -->
CSS (see jsFiddle for full CSS)
.homepage-slide-box {
float:left;
bottom: 0;
margin-top: 10px;
background: #31c68b;
font-size: 1.333em;
font-weight: 600;
color: #212121;
padding: 10px;
background: #fff;
}
Thanks for your help!
I would change a couple of things:
I would place the img tag inside the .homepage-slide-content class div (this will help the div to know the height of the image).
then add some things to your CSS so that your other slide divs mimic this height.
CSS
.homepage-slider-slide{
display:block;
position:relative;
}
.homepage-slider-slide img{
display:block;
}
.homepage-slide-inner {
position: relative;
height:100%;
width:100%;
}
.homepage-slide-content {
display: block;
position: absolute;
top: 0;
left: 0;
bottom:0;
z-index: 9999;
}
.homepage-slide-box {
position:absolute;
bottom: 0;
background: #31c68b;
font-size: 1.333em;
font-weight: 600;
color: #212121;
padding: 10px;
background: #fff;
width: 350px;
}
JS FIDDLE DEMO
remove this css positioning
.homepage-slide-inner {
position: relative;
}
and add this
.homepage-slider-slide {
position: relative;
}
and change position of top: 50px to .homepage-slide-content {bottom : 0}
jFiddle
Related
I'm new so please be as simple as possible. I want to put words over a picture and got code that words below. The text appears on a black box in the lower right. I want it to appear in the upper left.
When I change in text box bottom to top and right to left it takes up the whole image. If I keep it on the right-it goes down all the way to the bottom of the image. Even if I try to increase the px to make it not so long it doesn't work. How can I fix this & what am I doing wrong?
.container {
position: relative;
font-family: Arial;
}
.text-block {
position: absolute;
bottom: 20px;
right: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
<div class="container">
<img src="pdf/library.jpg" style="width:100%;">
<div class="text-block">
<h4>WORDS</h4>
</div>
</div>
The positioning of the element is based on the left, right, top and bottom and it will be relative the element you positioned to (in your case is the div with the container class).
If you will use only left and top it will work as you expect. The values is how much space from that side it will take.
Also, if you use 3 or 4 sides, it will stretch the element so the boundaries of it will be on the side you specified.
For example (I used sample image from google for the snippet):
#TEST {
background-image: linear-gradient(45deg,rgb(218,34,255) 30%,#9733ee 90%);
padding: 1em;
border-radius: 3px;
margin: 1em 0;
color: #fff;
}
.container {
position: relative;
font-family: Arial;
}
.text-block {
position: absolute;
top: 20px;
left: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
<section id="TEST">
<div class="container">
<img src="https://www.petcareplus.ie/wp-content/uploads/2020/04/dog-puppy-on-garden-royalty-free-image-1586966191.jpg" style="width:100%;">
<div class="text-block">
<h4>WORDS</h4>
</div>
</div>
</section>
I'm trying to make an overlay on an image in css but I have some problems I don't know how to solve.
Check this image out, this is a mockup in PhotoShop:
but I got this:
As you can see the blockquote and text also have a opacity, this is the only thing I actually need to solve(the blur is not required, would appreciate a good example though)
I also created a codepen, other image, same code
img.header {
width: 100%;
}
div.wrapper {
position: relative;
/* important(so we can absolutely position the description div */
}
div.description {
height: 100%;
position: absolute;
/* absolute position (so we can position it where we want)*/
bottom: 0px;
/* position will be on bottom */
left: 50%;
width: 50%;
/* styling bellow */
background-color: #cddc39;
color: white;
opacity: 0.4;
/* transparency */
filter: alpha(opacity=60);
/* IE transparency */
}
p.description_content {
padding: 10px;
margin: 0px;
font-size: 30px;
}
<div id="praktijk" class="col s12">
<div class="row pad-top">
<div>
<div class='wrapper'>
<!-- image -->
<img class="header" src='https://www.w3schools.com/w3images/fjords.jpg' />
' />
<!-- description div -->
<div class='description'>
<!-- description content -->
<p class='description_content'>
<blockquote>
This is an example quotation that uses the blockquote tag.
</blockquote>
</p>
<!-- end description content -->
</div>
<!-- end description div -->
</div>
</div>
</div>
</div>
img.header { width: 100%;}
div.wrapper {
position: relative;
overflow:hidden;
}
div#imageBlur, div.description {
height: 100%;
position: absolute;
left: 50%;
width: 50%;
}
div#imageBlur {
background-repeat: no-repeat;
background-size: cover;
background-position-y: 8px;
background-position-x: 100%;
-webkit-filter: blur(3px);
filter: blur(3px);
bottom: 8px;
}
div.description {
bottom: 4px;
background-color:rgba(205, 207, 57, 0.4) ;
color: white;
}
p.description_content {font-size: 50px;}
blockquote{
border-left:solid 2px #ffd800;
padding-left:5px;
font-size: 25px;
}
<div id="praktijk" class="col s12">
<div class="row pad-top">
<div>
<div class='wrapper'>
<img class="header" src='https://www.w3schools.com/w3images/fjords.jpg' />
<!-- description div -->
<div id="imageBlur" style="background-image: url(https://www.w3schools.com/w3images/fjords.jpg);"></div>
<div class='description'>
<p class='description_content'>
<blockquote>
This is an example quotation that uses the blockquote tag.
</blockquote>
</p>
</div>
</div>
</div>
</div>
</div>
If you just want to apply the opacity to background, in this case just a background color, I prefer the rgba color.
See this : css color https://www.w3schools.com/cssref/css_colors_legal.asp
for apply this property, you must translate your color from hex to rgb color
Here the page : https://www.webpagefx.com/web-design/hex-to-rgb/
so your wrapper class will just be this:
.div.description{
height: 100%;
position: absolute;
bottom: 0px;
left: 50%;
width: 50%;
background-color: rgb(205,220,57,0.6);
color: white;
}
Sir Farhad Bagherlo got the right one. Just change the overlay's background color to rgb/rgba of the color and tone you want then remove the opacity. That makes it easeir.
Here is a list of colors you may use: https://www.december.com/html/spec/colorrgbadec.html
Oh, I'm sorry, I don't see the blured element
If you want to make only the background blured, you must not put the text inside the background. Instead make 2 div:
First div as the background and filtered blur, then set the position:absolute, fully width and height. Dont forget to set position:relative to the parent;
Second div as the text
I hope this will help
I'm trying to make one blog design, and I want to display text on image that is vertically and horizontally centered. My CSS class .featured-article have relative position. This is HTML and CSS:
<div class="featured-article">
<img src="images/Image.png" alt="Image"> <!-- This Works Perfect, I don't need to touch it anymore -->
<div class="article">
<img src="uploads/4.png" alt="Image"> <!-- Image where I need to add TextBox -->
<div class="title"> <!-- TextBox that I need to center on image -->
<span><strong>TEXT</strong> TEXT</span>
</div>
.......... Other Eelements
.......... Other Eelements
.......... Other Elements
CSS:
.featured-article { /* Container of Post */
position: relative;
margin-top: 60px;
}
.featured-article > img { /* Background Image, This Works Perfect */
position: absolute;
top: -150px;
left: 20px;
z-index: -1;
}
.featured-article > .article > img { /* Image where I need to add TextBox */
width: 100%;
}
.featured-article > .article > .title > span { /* TextBox that I need to center on image */
background-color: #9ED7D8;
padding: 25px 35px 25px 35px;
text-transform: uppercase;
max-width: 800px;
font-size: 30px;
font-weight: 300;
color: #FFF;
}
This should look like this: Example.
you can use css attribute background-image for your parent element, and inside that put your text in the child element.
after that there are many ways of positioning the child in the center of parent element...
one way would be like this:
html:
<div class="parent">
<div class="child">
your text
</div>
</div>
and css:
.parent{
background-image: url("images/Image.png");
height:...;
width:...;
}
.child{
position: absolute;
top: ....;
width: 100%;
text-align: center;
}
My HTML code:
<div id="backgroundH"></div>
<div id="header">
<h2> Premium Store </h2>
</div>
My CSS code:
#backgroundH {
width: 100%;
height: 50px;
background-color: #dddddd;
}
#header {
top:-50px;
color:black;
font-family:Courier New;
}
body {
background-color:#cccccc;
}
So why isn't it working? I tried everything. Can somebody show me how to put that text over my div which I am using as a background in this case?
It should look like a gray background underneath a text which says "premium store".
You've got the order of your divs wrong it should be like this:
http://jsfiddle.net/mCGt8/
html:
<div id="backgroundH">
<div id="header">
<h2> Premium Store </h2>
</div>
</div>
css:
#backgroundH {
width: 100%;
height: 50px;
background-color: #dddddd;
}
#header {
top:-50px;
color:black;
font-family:Courier New;
}
body {
background-color:#cccccc;
}
In text-div you are using top: -50px, so I believe you want text-div sibling to background-div and you missed position: relative.
#header {
position: relative;
top: -50px;
color: black;
font-family: Courier New;
}
The problem with position: relative is that the space that div would fill before top: -50px stills there.
So, you have 2 ways:
CSS: use margin-top: -50px;
HTML: nest text-div to background-div if it's possible. (preferred)
I am not an expert web-dev so please bear with me here.
I would like to display a banner style header for a page with the top part taken up by an image that is 275x116 and then a horizontal menu bar (styled using ul items) appearing at 70% from the top of the banner.
How would I set this up so that the banner appears underneath my navigation? Currently, a portion of the left side of my menu bar sits underneath the image but I'd like it to be the opposite so the menu bar is above the image, some thing like this:
============= <start of header> ===========
--------
| img |
| |
| Horizontal menu
| |
--------
============= <end of header> ===========
My css:
#header
{
background-color: green;
border: 0;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 120px;
}
#logo
{
background: green url(images/logo.png) no-repeat scroll 0 0;
margin: 0px 0px;
border: 1px solid white;
left: 20px;
top: 20px;
width: 275px;
height: 116px;
position: absolute;
z-index: -1000;
}
.container {
border:1px solid grey;
margin-left:auto;
margin-right:auto;
width:960px;
}
My Html:
<body>
<div id="header">
<div id="logo">
</div>
<div class="container" id="primaryNavbar">
<ul>
<li>Home</li>
<li>Books</li>
<li>Shows</li>
<li>Movies</li>
</ul>
<div class="clear"> </div>
</div> <!-- end of container -->
</div> <!-- end of header -->
</body>
I thought that setting the position to "absolute" for the logo element and adding in a very low z-index would achieve this but that isn't the case here.
Any suggestions?
Append these items to your existing styles:
#header
{
position: relative; //this will keep your absolute items inside of this container
}
#logo
{
z-index: 1;
}
.container {
z-index: 2;
position: absolute;
}
.container ul li {
float: left;
}
Make the .container float left, position relative and move it around until it's where you need it.