This is my code.I want to move that yellow circle to right (about 25px) .how can I give that style to the second image only.
.img_home
{
background-repeat: no-repeat;
height: 1000px;
background-image: url(http://www.spidycode.com/testing/revibe/images/Circle1.png),url(http://www.spidycode.com/testing/revibe/images/Circle2.png);
}
<div class="img_home"></div>
Try this
.img_home
{
background-repeat: no-repeat;
height: 1000px;
background: url(http://www.spidycode.com/testing/revibe/images/Circle1.png) 25px top no-repeat,url(http://www.spidycode.com/testing/revibe/images/Circle2.png) no-repeat;
}
<div class="img_home"></div>
simply add background-position: 25px 0px, 0px 0px;
Try this
.img_home
{
background-repeat: no-repeat;
height: 1000px;
background: url(http://www.spidycode.com/testing/revibe/images/Circle1.png) 25px 0 no-repeat,url(http://www.spidycode.com/testing/revibe/images/Circle2.png) no-repeat;
}
<div class="img_home">
You could do with setuping parameters with background:
background: url repeat posX posY
.img_home
{
height: 1000px;
background: url(http://www.spidycode.com/testing/revibe/images/Circle1.png) no-repeat,url(http://www.spidycode.com/testing/revibe/images/Circle2.png) no-repeat 200px 0px;
}
<div class="img_home"></div>
Related
I'm currently trying to figure out a way to make it so that upon hovering over each separate box on the front page of my website (http://thefloodplains.com/), a shadow animation occurs for that specific box. I want it to look very similar to what can be found at this page: http://tobiasahlin.com/blog/how-to-animate-box-shadow/. I've used this page as a guide in an attempt to set up a hover shadow effect.
Here's the CSS/HTML specifically for the div boxes on my web page (http://thefloodplains.com/):
.col-md-4 {
color:#00A5D1;
height:300px;
}
.col-md-3 {
color:#00A5D1;
height:300px;
box-shadow: 2 2px 3px rgba(0, 0, 0.1, 0.1);
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.col-md-4:hover {
background-color: #FFE097;
}
.col-md-3:hover {
-webkit-transform: scale(1.25, 1.25);
transform: scale(1.25, 1.25);
}
.col-md-4 h3 {
position: relative;
top: 40%;
transform: translateY(-50%);
}
.col-md-4 {
color:#00A5D1;
height:300px;
border: 1px solid #FF8B6F;
position: relative;
}
.col-md-3 {
height:300px;
position: relative;
}
.col-md-4:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
background: #FFE097;
opacity: 0;
}
.col-md-3:after {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 0;
left: 0;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
opacity: 0;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.col-md-4:hover:after {
opacity: .5;
}
.col-md-3:hover:after {
opacity: 1;
}
.col-md-4 h3 {
position: relative;
z-index: 1;
top: 40%;
transform: translateY(-50%);
}
Anything with the class ".col-md-3" is where I have attempted to add in the hover-shadow effects (in much the same way that I already have the current hover-color effects set up). The following code is the rest of the CSS/HTML of my front page:
<style>
h3 {
font-size:36px;
font-style: bold;
text-align:center;
font-family:'Buernard', Garamond, "Buenard", "EB Garamond",'EB Garamond';
}
img {
max-width: 100%;
max-height: 100%;
}
#div1 {
background-image: url('AboutIcon.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div2 {
background-image: url('ArticlesIcon.png');
background-position: center center; //center the image in the div
background-size: contain; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div3 {
background-image: url('CodingBrackets2.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div4 {
background-image: url('ContactIcon.png');
background-position: center center; //center the image in the div
background-size: contain; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div5 {
background-image: url('FSMusicArt.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div6 {
background-image: url('AudioProduction4.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div7 {
background-image: url('Violin3.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div8 {
background-image: url('GalleryImage2.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div9 {
background-image: url('Handshake2.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
div {
background-image:url(../images/please-dont-use-spaces.jpg); //add the background image
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<a href="About.html" title="About the site and Author"><div class="col-md-4" id='div1'>
<h3>About</h3>
</div></a>
<a href="Articles.html" title="Original Articles and Content"><div class="col-md-4" id='div2'>
<h3>Articles</h3>
</div>
<a href="CodingCorner.html" title="Coding Corner - Code for a Variety of Projects"><div class="col-md-4" id="div3">
<h3>Coding Corner</h3>
</div></a>
</div>
<div class="row">
<a href="Contact-Social.html" title="Contact The Floodplains & The FloodShark"><div class="col-md-4" id="div4">
<h3>Contact & Social</h3>
</div></a>
<a href="TheFloodSharkMain.html" title="The FloodShark Music and Media"><div class="col-md-4" id="div5">
<h3>
The FloodShark
Music
</h3>
</div></a>
<a href="FloodplainProductions.html" title="Floodplain Productions - virtual record label"><div class="col-md-4" id="div6">
<h3>Floodplain Productions</h3>
</div></a>
</div>
<div class="row">
<a href="ClassicalCorner.html" title="Classical Corner - A nook dedicated to sharing and categorizing classical music"><div class="col-md-4" id="div7">
<h3>Classical Corner</h3>
</div></a>
<a href="Gallery.html" title="Images, Photographs, and Album Art"><div class="col-md-4" id="div8">
<h3>Gallery</h3>
</div></a>
<a href="Contribute-Support.html" title="Contribute to The Floodplains!"><div class="col-md-4" id="div9">
<h3>Contribute / Support</h3>
</div></a>
</div>
</div>
</body>
I tried adding "col-md-3" to the div's as a second class in the above code along with "col-md-4," which controls the color hover effect. The problem is, I don't think this method works, but I'm not really sure what does. As of right now, I'm using the "col-md-4" color hover effect - which is working - but getting a shadow effect to work simultaneously is something I have yet to figure out.
So currently - upon hovering - the boxes turn to that transparent shade of orange/yellow. Is there a way that I can get the shadow animation AND the color-change hovers to work together at the same time? So basically I just need a hover animation added to what is already here at http://thefloodplains.com/.
Thank you in advance for your time.
Create a new class for the effect i.e. hovernow add the following code:
body {
background-color: white;
}
.hovernow {
background-color: red;
width: 100px;
height: 100px;
margin: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transition: box-shadow 0.3s ease-in-out;
}
.hovernow:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
}
<div class="hovernow">
</div>
Then add this class .hovernow to the div's which you like the hover effect to apply to.
Are you looking for this, Fiddle
I have added the style for .col-md-4. Please check the code...
been thinking of what would be the best way to achieve a background image with a sharp corners. I tried some css like border-radius and clip-path but no luck. I guess clip-path is the nearest possible answer but can't get it. Please see my sample below.
.main-header {
background: url('http://placehold.it/150x150') no-repeat center center;
background-position: 0% 33%;
background-size: cover;
min-height: 480px;
border-radius: 0 0 45% 45%;
}
<div class="main-header">
<br>
</div>
I'm looking to have below image.
How about this approach?
JSBin
body {
background: white;
margin: 0;
}
.main-header {
background: url('http://www.stevensegallery.com/g/400/200') no-repeat center center;
background-position: center;
background-size: cover;
min-height: 480px;
position: relative;
}
.main-header::after {
content: '';
display: block;
position: absolute;
background: transparent;
/* You can play around with these numbers to adjust the curve */
bottom: -4rem;
left: -25%;
width: 150%;
height: 400px;
border-bottom: solid 4rem white;
border-radius: 0 0 50% 50%;
}
<div class="main-header">
<br>
</div>
You can use below code for it
Add border-bottom-left-radius:60% 30%; border-bottom-right-radius:60% 30%; css. You can play with radius properties to know how it works..
.main-header {
background: url('http://placehold.it/150x150') no-repeat center center;
background-position: 0% 33%;
background-size: cover;
min-height: 480px;
border-bottom-left-radius:60% 30%;
border-bottom-right-radius:60% 30%;
}
<div class="main-header">
<br>
</div>
if you can use image by img, not background. I think you can try "clip-path" as below.
Codepen example
HTML:
<div class="main-header">
<img src="http://placehold.it/150x150">
</div>
CSS:
img {
-webkit-clip-path: circle(100% at 50% 0);
clip-path: circle(100% at 50% 0);
}
and this site is useful to make clip-path (http://bennettfeely.com/clippy/)
I do not really understand what happens with some basic HTML/CSS code:
The HTML:
<div class="class1">
<div class="class2">
hello
</div>
</div>
The CSS:
.class1
{
height:300px;
background: url('https://www.planwallpaper.com/static/images/kartandtinki1_photo-wallpapers_02.jpg') center no-repeat;
background-size:100% 100%;
background-attachment:fixed;
padding:60px;
}
.class2
{
background: url('https://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg') center no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
border-radius: 100px;
line-height:100px;
color:white;
}
I also did a codepen to "show it live", here.
My issue is that I get some strange "black" at the border radius, and I do not know why. Here are some pics:
At the left I get the expected result with IE11, but at the left I get a strange result with Firefox (latest vers.).
My question is, how can I fix this so both browsers show me the result at the left picture (i.e. get rid of the black)?
Thanks!
You can use this code
body {
margin: 0;
padding: 0;
}
.class1 {
height:969px;
background: url('https://d19m59y37dris4.cloudfront.net/directory/1-3/img/photo/photo-1501621965065-c6e1cf6b53e2.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
background-attachment:fixed;
padding:60px;
}
.class2 {
background: url('https://d19m59y37dris4.cloudfront.net/directory/1-3/img/photo/new-york.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
border-radius: 100px;
line-height:100px;
color:white;
}
<div class="class1">
<div class="class2">hello</div>
</div>
I created a responsive page which has a box with text and blurred background. The page is available here on JSFiddle.
The problem is: .content element is not visible without setting its opacity to 0.99. Why?
HTML
<div class="content-box">
<div class="content-bg"></div>
<div class="content">
<p>Text with blurred background</p>
<p>Text with blurred background</p>
</div>
</div>
CSS
body {
background-image: url('http://hazor.iki.fi/2003/juhannus/isot/DSCN9068-Maisema.jpg');
background-color: black;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
background-size: no-repeat fixed center center cover;
overflow: hidden;
}
.content-box {
position: relative;
width: 300px;
overflow: hidden;
}
.content-bg {
position: absolute;
background-size: cover;
background-image: url('http://hazor.iki.fi/2003/juhannus/isot/DSCN9068-Maisema.jpg');
background-color: black;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
background-size: no-repeat fixed center center cover;
filter: blur(5px);
-webkit-filter: blur(5px);
}
.content {
border-radius: 10px;
z-index: 100;
background-color: rgba(0, 0, 0, 0.7);
opacity: 0.99999; /* Does not work without this wtf */
color: white;
}
.content :first-child { margin-top: 0px }
JS
function updateBackground() {
var contentBox = $(".content-box");
var bg = $(".content-bg");
bg.css("left", -(contentBox.offset().left));
bg.css("top", -(contentBox.offset().top));
bg.width($(window).width());
bg.height($(window).height());
}
$(window).resize(function() {
updateBackground();
});
updateBackground();
Why does the code not work without opacity?
This is because your content element seems to be behind the content-bg element. The z-index has no effect because there is no position property assigned to it.
Why does it work when opacity of 0.99 is added?
As mentioned by BoltClock in this answer, adding a opacity less than 1 automatically creates a new stacking context (similar to adding z-index to a positioned element). This brings content element forward and thus it gets displayed.
What is the ideal solution?
Adding position: relative would make the z-index work as expected (which is bring the element above content-bg) and that would solve the issue.
function updateBackground() {
var contentBox = $(".content-box");
var bg = $(".content-bg");
bg.css("left", -(contentBox.offset().left));
bg.css("top", -(contentBox.offset().top));
bg.width($(window).width());
bg.height($(window).height());
}
$(window).resize(function() {
updateBackground();
});
updateBackground();
body {
background-image: url('http://hazor.iki.fi/2003/juhannus/isot/DSCN9068-Maisema.jpg');
background-color: black;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
background-size: no-repeat fixed center center cover;
overflow: hidden;
}
.content-box {
position: relative;
width: 300px;
overflow: hidden;
}
.content-bg {
position: absolute;
background-size: cover;
background-image: url('http://hazor.iki.fi/2003/juhannus/isot/DSCN9068-Maisema.jpg');
background-color: black;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
background-size: no-repeat fixed center center cover;
filter: blur(5px);
-webkit-filter: blur(5px);
}
.content {
position: relative; /* add this */
border-radius: 10px;
z-index: 100;
background-color: rgba(0, 0, 0, 0.7);
color: white;
}
.content:first-child {
margin-top: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-box">
<div class="content-bg"></div>
<div class="content">
<p>Text with blurred background</p>
<p>Text with blurred background</p>
</div>
</div>
I have four categories in my solutions page, Oil&gas, utilities, Inteligent building,
Industrial Engineering.
I have put a hover effect on each category there is a main div
called pic_categry(while hover the background colour change). And I have'
also put an hover effect in child div of pic_categry called pic_catgry_img1. My
problem is when I hovering the parent div(pic_categry) the hover effect of
pic_catgry_img1 is not working its working only hover that div. How can I display both hover effect when hovering parent div (pic_categry).
HTML:
<div id="wrapper4"> <a href="oil_n_gas.php">
<div class="pic_categry">
<div class="pic_catgry_img1"></div>
<div class="pic_catgry_title">Oil N Gas</div>
</div>
</a> <a href="smart_meter.php">
<div class="pic_categry">
<div class="pic_catgry_img3"></div>
<div class="pic_catgry_title">Utilities</div>
</div>
</a> <a href="inteligent.php">
<div class="pic_categry">
<div class="pic_catgry_img2"></div>
<div class="pic_catgry_title">Intelligent Building</div>
</div>
</a> <a href="industrial_engineering.php">
<div class="pic_categry align_tab">
<div class="pic_catgry_img4"></div>
<div class="pic_catgry_title">Industrial Engineering </div>
</div>
</a>
</div>
CSS:
.pic_categry {
width: 233px;
height: 239px;
float: left;
text-align: center;
color: #425B97;
margin-bottom: 20px;
padding-top: 10px;
padding-right: 3px;
padding-bottom: 5px;
padding-left: 3px;
margin-right:23px;
}
.pic_categry:hover {
background-color:#e8e8e8;
border-radius:4px;
color:#263a87 !important;
}
.pic_catgry_title {
font-family:'Varela', sans-serif;
font-size:20px;
text-align:center;
padding-bottom: 10px;
}
.pic_catgry_title:hover {
color:#263a87;
text-decoration:none !important;
}
.pic_catgry_img1 {
width: 157px;
height: 128px;
margin: 0px auto;
background-image: url(../images/new/ind_oil.png);
background-repeat: no-repeat;
background-position: left top;
}
.pic_catgry_img1:hover {
background-image: url(../images/new/ind_oil.png);
background-repeat: no-repeat;
background-position: left bottom;
}
.pic_catgry_img2 {
width: 157px;
height: 128px;
margin: 0px auto;
background-image: url(../images/new/ind_smart.png);
background-repeat: no-repeat;
background-position: left top;
}
.pic_catgry_img2:hover {
background-image: url(../images/new/ind_smart.png);
background-repeat: no-repeat;
background-position: left bottom;
}
.pic_catgry_img3 {
width: 157px;
height: 128px;
margin: 0px auto;
background-image:url(../images/new/ind_utlts.png);
background-repeat: no-repeat;
background-position: left top;
}
.pic_catgry_img3:hover {
background-image: url(../images/new/ind_utlts.png);
background-repeat: no-repeat;
background-position: left bottom;
}
.pic_catgry_img4 {
width: 157px;
height: 128px;
margin: 0px auto;
background-image:url(../images/new/ind_heavy.png);
background-repeat: no-repeat;
background-position: left top;
}
.pic_catgry_img4:hover {
background-image: url(../images/new/ind_heavy.png);
background-repeat: no-repeat;
background-position: left bottom;
}
Just change your code like this:
.pic_catgry_img1:hover{
background-image: url(../images/new/ind_oil.png);
background-repeat: no-repeat;
background-position: left bottom;
}
to
.pic_categry:hover .pic_catgry_img1{
background-image: url(../images/new/ind_oil.png);
background-repeat: no-repeat;
background-position: left bottom;
}
so you can apply hover effects changes on child div while mouse enters parent div.
change the background color and use your desired image
.pic_categry > .pic_catgry_img1:hover{background-color:#FF0000;}
try
.pic_categry:hover .pic_catgry_img1{
background-position: left bottom; //only need this
}
from #Atrem Fitiskin 's comment
change only dependent properties (in this case, only
background-position).