I've seen tons of questions that are the exact opposite of what I need. I want a button, that when hovered over, will have an opaque background, but text that is the color of the background image of the body.
Here's an easy way to do it with a bit o' jquery.
fiddle
$(".filter").hover(function() {
$(this).css("opacity", ".8");
}, function() {
$(this).css("opacity", ".4");
});
#box {
background-image: url("http://vignette2.wikia.nocookie.net/despicableme/images/7/7a/Gru_thinking.jpg/revision/latest?cb=20130901203940");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
border: 1px solid;
width: 500px;
height: 300px;
position: relative;
opacity: 1;
}
.filter {
width: 100%;
height: 100%;
background-color: white;
opacity: 0.4;
}
p {
width: 100%;
height: 100%;
color: #000;
text-align: center;
margin: auto;
}
p:hover {
width: 100%;
height: 100%;
color: lightblue;
text-align: center;
margin: auto;
}
a{text-decoration:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">
<div id="box">
<div class="filter">
<p>
hello my name is rachel
</p>
</div>
</div>
</a>
try with that.
body{background-color:#000;}`
button{
color:white;`
background-color:red;}
button:hover, button:focus{
color:transparent;
background-color:rgba(255,0,0,.5)}
Related
HTML and CSS code for the given problem I want the AJTutorials on the green background after the logo, not below it.
Refer to this image
After removing display:block
body {
font-family: "Comforter", cursive;
font-family: "Cormorant", serif;
}
.Top-heading {
background-color: rgb(160, 228, 143);
height: 60px;
background-size: cover;
}
.heading img {
/*display: block;*/
position: relative;
object-fit: fill;
width: 70px;
height: 70px;
background-repeat: no-repeat;
background-size: cover;
}
.AJ {
text-decoration: none;
z-index: 2;
color: black;
}
.Tutorials {
z-index: 2;
color: red;
}
<body>
<section class="Top-heading">
<div class="heading">
<img src="logo.jpg" alt="">
AJ<span class="Tutorials">Tutorials</span>
</div>
<div>
</div>
</section>
</body>
Whichever element with display: block; will occupy the entire available width. I'd start with removing display: block; from the .heading img.
I want to set two background images to div and then make them changing while hovering with fade effect like this.
.kid {
max-width:50%;
position:relative;
}
.kid img {
display:block;
opacity:1;
height: auto;
transition:.6s ease;
width:100%;
position:absolute;
z-index:12;
}
.kid img:hover {
opacity:0;
}
.kid img + img {
display:block;
opacity:1;
position:relative;
z-index:10;
}
<div class="kid">
<img src="https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg" alt="Kid" itemprop="image" width="600" height="750" />
<img src="https://cdn.pixabay.com/photo/2020/02/04/16/14/leaves-4818626_960_720.jpg" alt="Adult" width="600" height="750" />
</div>
Here it's done by putting image in html code. I have to do this in css as background-image, because I made two column grid gallery (50% width and 100vh) and it doesn't works with <img>.
Here is my code. Help me to get the same effect like in first fiddle.
body{
margin: 0 auto;
width: 100%;
height: 100vh
}
.left{
float: left;
}
.right{
float: right
}
.col-half-width{
width: 50%;
height: 100vh;
}
.project-01{
background: #ccc url('https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg') no-repeat center center;
background-size: cover;
}
.project-02{
background: url('https://cdn.pixabay.com/photo/2020/02/04/16/14/leaves-4818626_960_720.jpg') no-repeat center center;
background-size: cover;
}
.project-01,
.project-02 img{
max-width:100%;
}
<div class="col-half-width left project-01"></div>
<div class="col-half-width right project-02"></div>
Try it using CSS :hover and transition. Note: perhaps you should preload the image so that it works smoothly on the first time aswell.
body{
margin: 0 auto;
width: 100%;
height: 100vh
}
.left{
float: left;
}
.right{
float: right
}
.col-half-width{
width: 50%;
height: 100vh;
}
.project-01{
background: #ccc url('https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg') no-repeat center center;
background-size: cover;
transition: 0.5s;
}
.project-01:hover{
background: url('https://cdn.pixabay.com/photo/2020/02/04/16/14/leaves-4818626_960_720.jpg') no-repeat center center;
background-size: cover;
}
.project-01,
.project-02 img{
max-width:100%;
}
<div class="col-half-width left project-01"></div>
The CSS property background-image is not animatable:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
I believe you'll have to do something much more cumbersome. We can use the opacity on a nested positioned object to get the desired effect. Any other content in the parent div will need a z-index value higher than the animated background.
body {
margin: 0 auto;
width: 100%;
height: 100vh
}
.left {
float: left;
}
.right {
float: right
}
.col-half-width {
width: 50%;
height: 100vh;
}
.project-01 {
background: #ccc url('https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg') no-repeat center center;
background-size: cover;
display: inline-block;
position: relative;
}
div.innerAnimate {
background: url('https://cdn.pixabay.com/photo/2020/02/04/16/14/leaves-4818626_960_720.jpg') no-repeat center center;
background-size: cover;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
z-index: 0;
transition: 0.5s;
}
.project-01:hover div.innerAnimate {
opacity: 1;
}
.project-01,
.project-02 img {
max-width: 100%;
}
div.innerContent {
color: white;
padding: 20pt;
position: relative;
z-index: 100;
}
<div class="col-half-width left project-01">
<div class="innerAnimate"></div>
<div class="innerContent">
<p>My content here.</p>
</div>
</div>
I am trying to set up my H1 tags with an expanding background-image, that serves as a "lower border" for the title, similar to this:
Here is the fiddle I am working with:
https://jsfiddle.net/gq4b7vu4/
#logoBuild {
width: auto;
border: 1px solid #F500FD;
}
h1 {
text-align: center;
color: #958a68;
font-family: 'Cantarell', sans-serif;
text-transform: uppercase;
display: table!important;
background-image: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottomborder.png");
background-repeat: repeat-x;
}
}
#titleBottom {
border: 2px solid #0FEEF1;
}
#leftBottom {
width: 48px;
height: 20px;
background-image: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_left.png");
background-repeat: none;
border: 0px solid #F20004;
float: left;
}
#rightBottom {
width: 48px;
height: 20px;
background-image: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_right.png");
background-repeat: none;
border: 0px solid #F20004;
float: left;
}
#centerBottom {
background-image: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottomborder.png");
background-repeat: repeat-x;
float: left;
width: auto;
}
#descenderBottom {
background-image: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_descender.png");
background-repeat: repeat-x;
float: left;
width: 1px;
height: 27px;
}
<div id="pageHead">
<div id="logoBuild">
<h1>Title goes here</h1>
<div id="titleBottom">
<div id="leftBottom"></div>
<div id="centerBottom"></div>
<div id="rightBottom"></div>
</div>
<div style="clear:both;"></div>
<div id="descenderBottom"></div>
</div>
I need the graphic to expand according to the width of the title, with the end flourishes on either side and the descender beneath it.
I've tried to build the border after (separate from) the H1 declaration, and I tried placing the H1 inside of the centerBottom div, both to no avail.
Well this was a lot of fun
https://jsfiddle.net/gq4b7vu4/3/
Changed many of your styles to just psuedo content selectors.
#pageHead { overflow: visible; }
.logoBuild {
display: block;
width: 600px;
margin: 0 auto;
}
h1 {
position: relative;
display: inline-block;
width: auto;
min-height: 75px;
margin: 0 auto;
text-align:center;
color:#958a68;
font-family: 'Cantarell', sans-serif;
text-transform:uppercase;
background-image: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottomborder.png");
background-repeat: repeat-x;
background-position: 0 48px;
overflow: visible;
}
h1 img {
position: absolute;
top: 68px;
left: 50%;
}
h1::before {
position:absolute;
left:-48px;
bottom: 0;
content: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_left.png");
}
h1::after {
position: absolute;
right: -48px;
bottom: 0;
content: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_right.png");
}
<div id="pageHead">
<div class="logoBuild">
<h1>
Title goes here
<img src="http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_descender.png" alt="" class="bottom-center-brdr">
</h1>
</div>
<div class="logoBuild">
<h1>
Oh hey another cool one
<img src="http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_descender.png" alt="" class="bottom-center-brdr">
</h1>
</div>
</div>
Things to note, min-height on that h1. You'll also need some bottom margin added to that header tag. There's an inline image in the header tag, didn't see an easy way to get around that, but assuming it could be implemented through more psuedo selectors and or a non-block element.
Im using a platform that only accepts html / css in line, and i was asked to make somehow a dropdown menu, where when i hover on one element, it resize it and there is an image show on it. The problem is that when i hover on one element, i cant hover and resize the second one, unless i take the mouse over this.
I tried to move backwards the hover elements with z index -1, but the transition got really bugged and goes up and down constantly.
<div id="mapa-expanduno"></div>
<div id="mapa-expanddos"></div>
<div id="mapa-expandtres"></div>
<div id="mapa-expandcuatro"></div>
<style type="text/css">
div {
position: absolute;
}
#mapa-expanduno {
border: 1px solid blue;
margin-left: 55px;
width: 110px;
height: 125px;
}
#mapa-expanduno:hover {
width:914px;
height: 450px;
margin-left: 0px;
background: url();
background-repeat: no-repeat;
}
#mapa-expanddos {
border: 1px solid red;
margin-left: 286px;
width: 110px;
height: 125px;
}
#mapa-expanddos:hover {
width:914px;
height: 450px;
z-index: -1;
margin-left: 0px;
background: url();
background-repeat: no-repeat;
}
#mapa-expandtres {
border: 1px solid lightgreen;
margin-left: 518px;
width: 110px;
height: 125px;
}
#mapa-expandtres:hover {
width:914px;
height: 450px;
z-index: -1;
margin-left: 0px;
background: url();
background-repeat: no-repeat;
}
#mapa-expandcuatro {
border: 1px solid black;
margin-left: 750px;
width: 110px;
height: 125px;
}
#mapa-expandcuatro:hover {
width:914px;
height: 450px;
margin-left: 0px;
background: url();
background-repeat: no-repeat;
}
</style>
Demo
Thanks on advice.
I'd switch to a sibling relationship:
div {
position: absolute;
}
.outer {
cursor: pointer;
width: 110px;
height: 125px;
}
.inner {
position: fixed;
top: 0;
left: 0;
width: 914px;
height: 450px;
z-index: -1;
display: none;
}
#mapa-expanduno {
border: 1px solid blue;
margin-left: 10%;
}
#mapa-expanduno:hover + .inner {
display: block;
background: url(http://lorempixel.com/1200/900/nature/4);
background-repeat: no-repeat;
}
#mapa-expanddos {
border: 1px solid red;
margin-left: 30%;
}
#mapa-expanddos:hover + .inner {
display: block;
background: url(http://lorempixel.com/1200/900/nature/3);
background-repeat: no-repeat;
}
#mapa-expandtres {
border: 1px solid lightgreen;
margin-left: 50%;
}
#mapa-expandtres:hover + .inner {
display: block;
background: url(http://lorempixel.com/1200/900/nature/2);
background-repeat: no-repeat;
}
#mapa-expandcuatro {
border: 1px solid black;
margin-left: 70%;
}
#mapa-expandcuatro:hover + .inner {
display: block;
background: url(http://lorempixel.com/1200/900/nature/1);
background-repeat: no-repeat;
}
<div class="outer" id="mapa-expanduno"></div>
<div class="inner"></div>
<div class="outer" id="mapa-expanddos"></div>
<div class="inner"></div>
<div class="outer" id="mapa-expandtres"></div>
<div class="inner"></div>
<div class="outer" id="mapa-expandcuatro"></div>
<div class="inner"></div>
<div id="preloader" style="position: absolute; left: -999em;">
<img src="http://lorempixel.com/1200/900/nature/3" />
<img src="http://lorempixel.com/1200/900/nature/4" />
<img src="http://lorempixel.com/1200/900/nature/1" />
<img src="http://lorempixel.com/1200/900/nature/2" />
</div>
JSFiddle demo
Here's a version with some transitions.
I don't know if this is helpful because the question is unclear, but I'll attempt to help.
It is hard to know exactly what's going on here without your HTML.
You can add a "> [desired element to change]" selector after your ":hover" selector.
so it would be something like
parent_element{
margin-left: 750px;
width: 110px;
height: 125px;
background: url();
background-repeat: no-repeat;
}
parent_element:hover > child_element{
width:914px;
height: 450px;
margin-left: 0px;
background: url();
background-repeat: no-repeat;
}
If it is not a child element you will have to use JavaScript to make the changes.
You might also consider using transitions in your css, which would make the box grow.
I have a div which has a background of a map. The map is centred and has a background size of 'contain'. The page is responsive so when the window resizes, so does the map. I need to be able to have a div on top of a certain country on the map, and on resize of the background map, the div stays directly on top of it.
So far I have
<div id="map-holder">
<div class="content">
<div class="placeholder"></div>
</div>
</div>
The div with the class of placeholder is the div i wish to keep on top of a certain country. The div with map-holder for ID is the div with the map background. Content is just to keep it all in place.
CSS
.content {
text-align: center;
width: 1200px;
margin: 0 auto;}
#map-holder {
position: relative;
height: 1000px;
width: 100%;
background: #F0F0F0;
background-image: url(../images/image-mapster.min.png);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
padding: 30px;
}
.placeholder {
position: absolute;
right: 30px;
background: #fff;
width: 80px;
height: 50px;
border: 1px solid #000;
margin: 5px;
padding: 5px;
padding: 0;
cursor: pointer;
}
.placeholder img {
width: 100%;
height: 100%;
padding: 0;
}
.placeholder:before {
position: absolute;
top: 30%;
left: 45%;
font-weight: bold;
content: '+';
}
The only solution I can think if actually putting an image over the map.
You can do this by having multiple CSS backgrounds. Just change your code for #map-holder to this:
#map-holder {
position: relative;
height: 500px;
width: 500px;
background: #F0F0F0;
background-image: url(this_image_goes_on_top.png), url(your_map.jpg);
background-size: contain, contain;
background-position: center center, center center;
background-repeat: no-repeat, no-repeat;
padding: 30px;
}
I made a little JSFiddle out of your code for demonstration: https://jsfiddle.net/zamofL9g/1/
Basically, it's a little difficult, as I recall, when using background images.
Since the image is, technically speaking "content" you can use an inline image and suitable wrapping divs. The 'pins' can then be positioned using % based positioning values.
Here's a Codepen demo I made some time ago. This one has a tooltip too!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.map {
width: 90%;
margin: 10px auto;
position: relative;
}
.map img {
max-width: 100%;
}
.box {
width: 2%;
height: 5%;
background-image: url(http://www.clipartbest.com/cliparts/ncX/qyL/ncXqyLdcB.png);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
}
#pin-1 {
top: 25%;
left: 38%;
}
.box:hover > .pin-text {
display: block;
}
.pin-text {
position: absolute;
top: -25%;
left: 110%;
width: 300%;
display: none;
}
.pin-text h3 {
color: white;
text-shadow: 1px 1px 1px #000;
}
<div class="map">
<img src="http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpg" alt="" />
<div id="pin-1" class="box">
<div class="pin-text">
<h3>My House</h3>
</div>
</div>
</div>