I need a div to be created this way shown in the image
CSS code as follows :
/* Styles go here */
.col-sm-3.widget_1_box {
padding: 0 5px;
}
.bg-success {
background-color: #dff0d8;
}
.tile-progress {
padding: 30px;
margin-bottom:1em;;
}
I have created a div here in plnkr
<div class="widget_1">
<div class="col-sm-3 widget_1_box">
<div class="tile-progress musers">
<div class="newheader">
<h4><i class="topicname">Manage Users</i> </h4>
<!-- <div class="progress"><div class="progress-bar inviewport animated visible slideInLeft" style="width: 40%;"></div></div>-->
<!--<span>40% increase</span>-->
</div>
</div>
https://plnkr.co/edit/kMis2AGzSdKfc1Bhis3e?p=preview
Need assistance.
Use a linear gradient
div {
background: linear-gradient(110deg, #1e5799 50%, #663399 50%);
height: 100px;
}
h1 {
text-align: center;
background: #1e5799;
color: white;
border-bottom: 1px solid rgba(20, 67, 120, 1)
}
<div>
<h1>HEADER</h1>
</div>
Related
This is the portion of my HTML: I want to have to the text fixed to an image and not disappear when I stop hovering on the text.
.overlay1 {
position: relative;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
/*Test hover*/
.container1:hover .overlay1 {
opacity: 0.5;
}
<div class="container1">
<a href="/content/gallery">
<div class="columny">
<div class="row1">
<img src="sites/chau.ac.zm/themes/chau/images/AF.jpg" alt="Snow" class="image" style="width:100%">
<!-- <div class="overlay1"> -->
<div class="overlay1">Gallery</div>
<!-- </div> -->
</div>
</div>
</a>
</div>
If I get you right, you want div.overlay1 to
be invisible initially
be visible on hover over div.container1
stay visible even if you hover out of div.container1
You cannot achieve 3. without using JavaScript.
I suggest this code:
/* You need this container to limit the .overlay1 position */
.img-container {
position: relative;
}
.overlay1 {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
/*Test hover - change :hover to class .visible */
.container1.visible .overlay1 {
opacity: 0.5;
}
<div id="container1" class="container1">
<a href="/content/gallery">
<div class="columny">
<div class="row1">
<div class="img-container">
<img src="https://images.unsplash.com/photo-1462899006636-339e08d1844e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&h=150&q=80" alt="Snow" class="image" style="width:100%">
<!-- <div class="overlay1"> -->
<div class="overlay1">Gallery</div>
<!-- </div> -->
</div>
</div>
</div>
</a>
</div>
<script>
// get element
var container1 = document.getElementById("container1");
// add hover event function
container1.addEventListener("mouseover", function() {
container1.className = "container1 visible";
});
</script>
See the solution if it works!
Just one question:
If you need a text to be fixed to an image, then why are you using hover?
.overlay1 {
position: absolute;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: auto;
transition: .5s ease;
opacity:1;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
right:-20px;
top:50%;
}
.row1{
position:relative;
width:500px; margin:0 auto;
}
<div class="container1">
<a href="/content/gallery">
<div class="columny">
<div class="row1">
<img src="https://image.shutterstock.com/image-photo/field-spring-flowers-sunlight-450w-377208970.jpg" alt="" />
<!-- <div class="overlay1"> -->
<div class="overlay1">Gallery</div>
<!-- </div> -->
</div>
</div>
</a>
</div>
remove class from gallery div
<div class="overlay1">Gallery</div> remove the class and use without any "overlay1"class
I've made 2 boxes that are blue and have a white text color, and when you hover over them, the text color changes from white to blue and the box color changes from blue to white. That part works. But when I hover below the text from the box, the text color changes back to blue even though I'm still with my mouse on the box 'href'.
Have a look at my code:
body {
background: #DCDCDC
}
a {
text-decoration: none;
}
#galaxy {
width: 400px;
height: 300px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin: 0 auto;
margin-top: 100px;
color: white;
font-size: 30px;
border-radius: 10px;
}
#galaxy:hover {
background-repeat: no-repeat;
background-color: #FFF;
}
#test {
width: 400px;
height: 300px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin: 0 auto;
margin-top: 100px;
color: white;
font-size: 30px;
border-radius: 10px;
}
#test:hover {
background-repeat: no-repeat;
background-color: #F00;
}
.button-title-text {
text-align: center;
color: #FFF;
font-size: 16px;
padding-top: 100px;
}
.button-title-text:hover {
text-align: center;
color: rgb(37, 100, 165);
font-size: 16px;
padding-top: 100px;
}
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<a href="#">
<div id="galaxy">
<div class="button-title-text">
<h1>Galaxy</h1>
</div>
</div>
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<a href="#">
<div id="test">
<div class="button-title-text">
<h1>test</h1>
</div>
</div>
</a>
</div>
Any help would be appreciated. Thanks in advance.
Consolidated your code and fixed the issue.
You had identical styles for your #galaxy and #test boxes (until they're hovered). I added a class called .box to both of them and moved the styles to that selector.
The issue in your post was occurring because you had a :hover rule on the box itself and the text inside. The hover on the text was behaving as written - it was only activating when you hovered directly over the text.
To fix this, I removed the color: attribute from your .button-title-text element, allowing it to inherit the color from the .box.
Then I added a .box:hover rule that changes the text color, which takes effect when either box is hovered.
Hope this helps!
body {
background: #DCDCDC
}
a {
text-decoration: none;
}
.box {
width: 400px;
height: 300px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin: 0 auto;
margin-top: 100px;
color: white;
font-size: 30px;
border-radius: 10px;
}
.button-title-text {
text-align: center;
font-size: 16px;
padding-top: 100px;
}
.box:hover {
background-color: #FFF;
color: rgb(37, 100, 165);
}
#test:hover {
background-color: #F00;
}
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<a href="#">
<div id="galaxy" class="box">
<div class="button-title-text">
<h1>Galaxy</h1>
</div>
</div>
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<a href="#">
<div id="test" class="box">
<div class="button-title-text">
<h1>test</h1>
</div>
</div>
</a>
</div>
can you please show me how to create the following color chart, it is created by individual bar and spacing. What is the best method to use, I need to insert it into a table td. Please advise.
I believe this is what you want to have:
.chart {
display: block;
}
.bar {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
width: 5px;
height: 10px;
background: #fff;
border: 1px solid #000;
}
.color-25 {
background: #bbb;
}
.color-50 {
background: #777;
}
.color-75 {
background: #333;
}
.color-100 {
background: #000;
}
<div class="chart">
<div class="bar color-100"></div>
<div class="bar color-100"></div>
<div class="bar color-100"></div>
<div class="bar color-75"></div>
<div class="bar color-75"></div>
<div class="bar color-50"></div>
<div class="bar color-25"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
You can create these easily using the floating ability of CSS, for example
.foo {
float: left;
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
}
.blue {
background: #13b4ff;
}
.purple {
background: #ab3fdd;
}
.wine {
background: #ae163e;
}
<div class="foo blue"></div>
<div class="foo purple"></div>
<div class="foo wine"></div>
I am developing a Web Page where background of a div is not displaying , only blank white screen is displaying but When I am using <img src="IMG/Banner.jpg"/> tag instead of background:Url(IMG/Banner.jpg); that image is displaying.
Please help me why background images are not working.
Please have a look at my code for div
.download-area {
background:url("IMG/secondary-banner.jpg") repeat scroll top center;
padding-bottom: 200px;
padding-top: 78px;
position: relative;
}
.download-area .section-title {margin-bottom: 42px}
.download-area .section-title > h1 {margin-bottom: 22px;}
.download-area .section-title p {
color: #fff;
font-size: 1.5em;
}
.download-buttons .button, .download-buttons .button:hover {
background: #ffffff none repeat scroll 0 0;
border-color: #009fdd;
color: #009fdd;
margin: 0 15px;
padding: 0 28px 0 54px;
position: relative;
background-color: #009FDD;
color: white;
}
.download-buttons .button img {
left: 26px;
position: absolute;
top: 10px;
transition: all 0.3s ease-in 0s
}
.download-buttons .button img.btn-hover {
display: none
}
.download-buttons .button:hover img.btn-hover {
display: block
}
.download-buttons .button:hover {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border-color: #ffffff;
color: #ffffff;
}
<div class="download-area" id="pricing">
<img src="IMG/secondary-banner.jpg">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="section-title">
<h1>Get <span>Started</span></h1>
<img src="IMG/title-bg-white.png" alt="">
<p></p>
<p class="text-white">First 100 minutes of Video processing on us!</p>
</div>
</div>
<div class="col-md-12">
<div class="download-buttons text-center">
UPLOAD YOUR FIRST VIDEO
</div>
</div>
</div>
</div>
</div>
Background image is working properly with online image.
i think your problem is the Link to your image!
Your Code is Working Well : Fiddle
Where is your image and How do you Link it ? maybe this is the problem!
I need some help here. I am trying to create a page header with some trickiness to it. I need to have a container-fluid with the left half background blue and the right half white. I then need a h2 "Title" /h2 inside a ? container to center it in the 12 columns the title has a border-bottom which stretches the width of the browser though. Here is my code but again I know it is some what half done since I cant figure out the best way to get the 50% background color. I need this to work on IE8 to present and the rest of the major updated browsers.
I hope I can get an image in here for you guys. If not I will set up a bootply for my example.
Thanks ahead of time for your help.
<style>
.halfWrapper{
background: linear-gradient(to right, blue 0%, blue 50%, #fff 50%, #fff 100%);
display:block;
padding:0;
}
.halfAndhalf {
width:50%;
background:blue;
display:inline-block;
}
.halfWrapper h2{color:#fff; text-transform:capitalize; border-bottom:1px solid green;}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 halfWrapper">
<div class="container halfContain">
<h2>Case Studies</h2>
</div>
</div>
</div>
</div>
You are on the right track, just change the class to body element.
For the fancy underling of the h2 element I have combined border-bottom property and styled hr (horizontal rules) element.
h2 here is an inline-block element, therefore the border-bottom element is present only for the length of the h2 text. Margins for heading and horizontal rule have been modified to zero pixels.
body {
background: linear-gradient(to right, black 0%, black 50%, #fff 50%, #fff 100%);
display: block;
padding: 0;
}
/* couldn't find it in html
.halfAndhalf {
width: 50%;
background: blue;
display: inline-block;
}
*/
.halfWrapper h2 {
color: #fff;
font-family: monospace;
font-size: 26px;
text-transform: uppercase;
border-bottom: 2px solid #4EB2DF;
display: inline-block;
padding-bottom: 0px !important;
margin-bottom: 0px !important;
}
.style-one {
border: 0px;
height: 1px;
background: #4EB2DF;
padding-top: 0px !important;
margin-top: 0px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 halfWrapper">
<div class="container halfContain">
<h2>Case Studies</h2>
<hr class="style-one">
</div>
</div>
</div>
</div>
Ok so I tried this several ways and feel this may be the best solution. Here is what I came up with. I hope it can solve other peoples issues that are similar.
<style>
.halfWrapper{
/*background: linear-gradient(to right, #tmcDarkblue 0%, #tmcDarkblue 50%, #fff 50%, #fff 100%);*/
background:#tmcDarkblue;
display:block;
padding: 120px 0 50px;
}
.halfContained{
background:#fff;
display:block;
padding: 174px 0 30px;
}
.halfContained .col-xs-12{
padding:0;
}
.halfBorder{
border-bottom:1px solid #tmcLightblue;
padding:0;
}
.style-one {
border: 0px;
height: 1px;
background: #4EB2DF;
padding-top: 0px !important;
margin-top: 0px !important;
}
.halfWrapper h2{color:#fff; text-transform:capitalize; border-bottom:1px solid #tmcLightblue; display:inline-block; margin-bottom:0;}
.halfContained h2{color:#fff; text-transform:capitalize; border-bottom:1px solid #tmcLightblue;}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 halfWrapper">
<div class="col-xs-11 col-xs-offset-1 col-sm-offset-5 halfBorder">
<h2>CASE STUDIES</h2>
</div>
</div>
<div class="hidden-xs col-sm-6 halfContained">
<div class="col-xs-12">
<hr class="style-one">
</div>
</div>
</div>
</div>