I want to show some text when make mouse over. Can you help me please? how can I hide and show text on image? below my code.
.foodMenu {
text-align: center;
background-image: url(../img/burger.jpg);
background-image: url(../img/burger.jpg);
background-image: url(../img/burger.jpg);
background-size: cover;
background-position: center;
height: 210px;
width: 280px;
}
.foodMenu .menuTitle {
font-size: 22px;
text-transform: none;
}
.foodMenu .menuTitle:hover {
}
<div class="col span-1-of-4 step_box">
<div class="foodMenu"><h3 style="color:#ffffff;" class="menuTitle">Burgers</h3></div>
</div>
iv>
.foodMenu {
text-align: center;
background-image: url(../img/burger.jpg);
/**** Do not repeat your Commands
background-image: url(../img/burger.jpg);
background-image: url(../img/burger.jpg);
****/
background-size: cover;
background-position: center;
height: 210px;
width: 280px;
/* positioning to make the text element inside the div */
position:relative;
}
.foodMenu .menuTitle {
font-size: 22px;
text-transform: none;
/** position text element **/
position:absolute;
bottom:0;
left:0;
right:0;
opacity:0; /* opacity to hide the element */
background:rgba(0,0,0,.75); /* background for good looking */
transition:all 0.3s; /* animation effect */
-webkit-transition:all 0.3s; /* animation effect */
}
.foodMenu:hover .menuTitle {
opacity:1; /* opacity to show the element on mouse over */
}
<div class="col span-1-of-4 step_box">
<div class="foodMenu"><h3 style="color:#ffffff;" class="menuTitle">Burgers</h3></div>
</div>
Related
I have 2 divs 50% width each. There is a huge header h1 which should have the color of these two divs. I have tried mix-blend-mode but it gives me some random colors when set to difference. My goal is to invert the colors but to keep the colors of the divs. This is a codepen file, I have tried to keep it as simple as possible: https://codepen.io/lukagurovic/pen/MLoZmj
The final effect is supposed to look like on in this example:
https://jsfiddle.net/1uubdtz6/
but I am not sure why doesn't it work with these colors.
Also, these divs are interactive so the color has to change dynamicly as divs are increasing in width when hovered, and there should be only stroke of text without any fill
body {
height: 100vh;
width: 100%;
position: relative;
background-color: #510035;
margin: 0 auto;
}
h1 {
font-size: 4.7em;
text-transform: uppercase;
}
.half-pager {
width: 50%;
height: 100%;
position: absolute;
display: inline-block;
overflow: hidden;
text-align: center;
}
.half-pager-dark {
background-color: #510035;
}
.half-pager-light {
right: 0;
background-color: #E8E8E8;
float: right;
}
.lp-header {
position: absolute;
}
.lp-header {
color:transparent;
mix-blend-mode: difference;
-webkit-text-stroke: 3px rgb(126, 124, 133);
z-index: 1;
}
.lp-header {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="box" class="half-pager half-pager-dark"></div>
<div id="box1" class="half-pager half-pager-light"></div>
<h1 class="lp-header">left or right</h1>
One idea is to duplicate the text and use CSS variable to define the color so you can easily change them in one place. I used clip-path to hide half of one text and show the other half:
body {
margin: 0;
--c1:#510035;
--c2:#E8E8E8;
}
body:hover {
--c1:red;
--c2:blue;
}
h1 {
font-size: 4.7em;
text-transform: uppercase;
margin: 0;
}
.first {
background:var(--c1);
-webkit-text-stroke: 3px var(--c2);
}
.second {
background:var(--c2);
-webkit-text-stroke: 3px var(--c1);
clip-path:polygon(0% 0%, 50% 0%, 50% 100%,0% 100%);
}
.lp-header {
position:absolute;
top:0;
left:0;
right:0;
min-height:100vh;
box-sizing:border-box;
color: transparent;
z-index: 1;
padding: 50px;
text-align: center;
transition:0.5s;
}
<h1 class="lp-header first">left or right</h1>
<h1 class="lp-header second">left or right</h1>
I'm trying to reveal text from the center against an element that has a background image. If I make the background of the animation a solid color, then that solid color appears around the text until the animation is done. If I put the same background image behind the text as is the behind the containing element, then a different version of that same image appears around my text. Any suggestions?
html:
<div class="container-big" id="the-wall">
<div class="chapter-hed">
<h5>PART 1</h5>
<h4 class="showhead">My heading</h4>
</div>
</div>
css:
#the-wall {
background-image: url(../img/wopo-3.png);
background-position: center;
background-size: cover;
background-color: black;
}
.chapter-hed h4 {
font-family: 'proxima-nova';
font-weight: 700;
font-size: 5rem;
letter-spacing: -2.4px;
line-height: 6.2rem;
text-align: center;
color: white;
margin: 0 auto;
border-bottom: 10px solid #e40d0d;
}
.chapter-hed h4:before {
left:0;
}
.chapter-hed h4:after {
right:0;
}
.chapter-hed h4:after,.chapter-hed h4:before {
position:absolute;
content:"";
height:100%;
height: 109px;
/*background:black;*/
background-image: url(../img/wopo-3.png);
background-position: center;
background-size: cover;
background-color: black;
}
.showhead:after, .showhead:before {
animation: revealText 4s;
animation-fill-mode:forwards;
}
#keyframes revealText {
0% {
width:50%
}
100% {
width:0%
}
}
I have added 2 wrappers for your class. One slides to the left, the other to the right. The net effect is that the element keeps centered, and is revealed progressively
#the-wall {
background-image: url(http://lorempixel.com/400/200);
background-position: center;
background-size: cover;
background-color: black;
}
.showheadctn1,
.showheadctn2 {
width: 100%;
overflow: hidden;
}
.showheadctn1 {
transform: translateX(50%);
}
.showheadctn2 {
transform: translateX(-100%);
}
.showhead {
font-family: 'proxima-nova';
font-weight: 700;
font-size: 5rem;
letter-spacing: -2.4px;
line-height: 6.2rem;
text-align: center;
color: white;
margin: 0 auto;
border-bottom: 10px solid #e40d0d;
width: 100%;
transform: translateX(50%);
}
.showheadctn1,
.showheadctn2,
.showhead {
animation: revealText 4s infinite;
animation-fill-mode: forwards;
}
#keyframes revealText {
0% {}
100% {
transform: translateX(0%);
}
}
<div class="container-big" id="the-wall">
<div class="chapter-hed">
<h5>PART 1</h5>
<div class="showheadctn1">
<div class="showheadctn2">
<h4 class="showhead">My heading</h4>
</div>
</div>
</div>
</div>
You can make 3 layers.
The bottom of the image you want.
In between the text.
The front again the image, but this time split in half.
And you do the same animation you have now but backwards. (On the third layer, logically)
Sure there is a more appropriate solution, but it is the first thing that has happened to me in my head
I am trying to animate this image properly for a hover in and out.
I have it 90% of the way there. Wor some reason if you hover in and out quickly, you can see the sprite moving in the background
Is there a fix or a better way to do this?
http://www.elevux.org/watermelon/
Thanks!!!
.wrapper {
width:600px;
height:600px;
overflow:hidden;
margin:20px;
}
.watermelon {
width:600px;
height:600px;
background:url(http://www.elevux.org/watermelon/watermelon-sprite.png) left top;
transition:background .5s steps(23, end);
display:block
}
.watermelon:hover {
background-position:-13800px top;
cursor:pointer
}
<div class="wrapper">
<div class="watermelon"></div>
</div>
You should move the transition onto the hover selector, seeing as that is when you want the animation to take place.
https://jsfiddle.net/gzk3mcyr/
.wrapper {
width: 600px;
height: 600px;
overflow: hidden;
margin: 20px;
}
.watermelon {
width: 600px;
height: 600px;
background: url(http://www.elevux.org/watermelon/watermelon-sprite.png) left top;
display: block;
}
.watermelon:hover {
background-position: -13800px top;
cursor: pointer;
transition: background .5s steps(23, end);
}
IE don't seem to know what bottom means... I'm trying to position background svg in the bottom center of the div.
screen shot comparing IE and Chrome
http://codepen.io/g_am1/pen/KdrvbZ
<div id="pixels">
<p><code>background-position: </code></p>
</div>
<div id="percentages">
<p><code>background-position: </code></p>
</div>
<div id="keywords">
<p><code>background-position: </code></p>
</div>
and
div {
width: 800px;
height: 200px;
border: 5px solid #E18728;
margin-bottom: .5em;
background: url(http://ridebike.ws/images/other/bikesenerey.svg);
background-repeat: no-repeat;
}
#pixels { background-position: 350px 0; }
#percentages { background-position: 50% 100%; }
#keywords { background-position: bottom center; }
/* styling for Pen, unrelated to background-position */
p {
margin-top: 50px;
padding: 0 1em;
}
I ended up using preserveAspectRatio="xMinYMax meet"
short question: How do I achieve this scrolling effect with css? ->
http://focuslabllc.com/
I already tried this:
#one {
background: url(http://images.buzzillions.com/images_products/07/02/iron-horse- maverick-elite-mountain-bike-performance-exclusive_13526_100.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment:fixed;
}
#two {
background: url(http://img01.static-nextag.com/image/GMC-Denali-Road-Bike/1/000/006/107/006/610700673.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment:fixed;
}
Thanks! :)
Its called a "curtain reveal" but in this instance its in reverse. http://www.thecssninja.com/css/reveal-effect
Essentially the first "slide" is located "below" all the other content and set to position: fixed and say z-index: 1 and all the others are set to position: relative and z-index: 10
http://jsfiddle.net/3n1gm4/8gDDy/
so in code it would be
HTML
<div class="slide1">CONTENT</div>
<div class="slide2">CONTENT</div>
CSS
.slide1 {
position: fixed;
z-index: 1; /* sets it below the other slides in the layer stack */
height: 100%
}
.slide2 {
position: relative;
z-index: 10; /* sets it above .slide1 */
margin-top: 100%; /* this pushes it below .slide1 in the scroll */
height: 100% /* full length slides */
}
* This was quickly done and probably not 100% accurate but intended to give you a basic idea about whats going on there.
Ok, you can do this with just CSS.
HTML
<div class="main">Sample text/div>
<div class="reveal-me-holder"></div>
<div class="reveal-me">Revealed</div>
CSS
body {
margin:0;
}
.main {
height: 700px;
position:relative;
z-index: 2;
background: red;
}
.reveal-me {
height: 500px;
position:fixed;
bottom:0;
width:100%;
background: black;
color:white;
}
.reveal-me-holder {
height: 500px;
}
This jsfiddle shows the results.