So here is my code...
I understand how to make the text disappear by making it transparent but i want it to stay gone after hovering over it so it doesnt come back - how do I accomplish this?
.disappear {
margin-top: 60px;
text-align: center;
transition: all 5s ease .3s;
font-family: Bungee Spice;
}
.disappear:hover {
color: transparent;
}
you need to use onmouseover and remove() like this
function bye() {
const dis = document.getElementById("dis");
dis.remove();
}
* {
padding: 0;
margin: 0;
/* border: 1px solid red; */
overflow-x: hidden;
}
div {
height: 50vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
font-size: xx-large;
overflow: auto;
background: lightblue;
}
<div class="div">
<h2 onmouseover="bye()" id="dis">will go on hover</h2>
</div>
I don't think it's possible to make it run smoothly with pure CSS, so far, this is what I think is close to what you want to accomplish. So before hover, the animation to make it gone is already set, but the animation is not running yet, the animation will run only if the element is hovered. The problem here is that when it's hovered then it's unhovered before it's gone, the element will be half gone as the animation is paused.
.container {
width: 100%;
height: 800px;
background: #dddddd;
}
.disappear {
margin-top: 60px;
text-align: center;
font-family: Bungee Spice;
background: yellow;
animation: example 5s linear forwards;
animation-play-state: paused;
}
.disappear:hover {
animation-play-state: running;
}
#keyframes example {
from {opacity: 1}
to {opacity: 0}
}
<div class="container">
not disappear
<div class="disappear">
DISAPPEAR
</div>
</div>
The better way would be to use javascript and use onmouseover to add the animation instead of using :hover, the difference is that when you onmouseout, the function is still executed (the animation persists). This is with JS:
function fade(elm) {
elm.style.animation = "example 5s linear forwards";
}
.container {
width: 100%;
height: 800px;
background: #dddddd;
}
.disappear {
margin-top: 60px;
text-align: center;
font-family: Bungee Spice;
background: yellow;
}
#keyframes example {
from {
opacity: 1
}
to {
opacity: 0
}
}
<div class="container">
not disappear
<div class="disappear" onmouseover="fade(this)">
DISAPPEAR
</div>
</div>
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 have a requirement that can be solved using a marquee
.ticker {
white-space: no-wrap;
}
.item {
display: inline-block;
cursor: pointer;
}
<marquee class="ticker" onmouseover="this.stop()" onmouseout="this.start()">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</marquee>
How do we make this compliant with html5 since marquee is deprecated?
I have seen a few examples, but most of them rely on fixed width.
In my example, the items are received from the server so there can be a lot of them. Also, I will need that stop on hover since the items are links to something else.
Thank you very much for your help,
PS: I want to make sure we can't do this in CSS only before I start exploring javascript.
This codepen has a great example of what you're looking for.
To make it pause on hover, I added a hover state to pause the animation:
https://codepen.io/anon/pen/zzpZyg
.marquee:hover div {
-webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
animation-play-state: paused;
}
body { margin: 20px; }
.marquee {
height: 25px;
width: 420px;
overflow: hidden;
position: relative;
}
.marquee div {
display: block;
width: 200%;
height: 30px;
position: absolute;
overflow: hidden;
animation: marquee 5s linear infinite;
}
.marquee span {
float: left;
width: 50%;
}
#keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}
.marquee:hover div {
-webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
animation-play-state: paused;
}
<div class="marquee">
<div>
<span>You spin me right round, baby. Like a record, baby.</span>
<span>You spin me right round, baby. Like a record, baby.</span>
</div>
</div>
Sorry I know I am late. However, I have a simple solution to create a marquee with CSS.
.marquee-container{
overflow:hidden;
}
.marquee{
min-width:100%;
animation: marquee 15s linear infinite;
}
.marquee:hover{
animation-play-state: paused;
}
#keyframes marquee {
from{margin-left : 120%;}
to{margin-left: -20%;}
}
<div class="marquee-container">
<p class="marquee">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
<span>Item 4</span>
</p>
</div>
Finally I found one that works, and here is the finally product https://fiddle.sencha.com/#view/editor&fiddle/228u
Here is the original one, https://codepen.io/lewismcarey/pen/GJZVoG
<div class="wrapper">
<div class="container">
<span>Span Me 1</span>
<span>Span Me 2</span>
<span>Span Me 3</span>
<span>Span Me 4</span>
</div>
</div>
The trick was to "left-pad" the wrapper to hide the container initially. Then, "right-pad" the container so that the animation only stops/restarts once the container has gone off screen. Both padding are sized relatively. display: block; is added to the container so that the right padding uses the wrapper's size. And finally, we add an animation on the wrapper's transform attribute.
Thank you all,
I am no good at java script
but here is it using html and css
PS. that mouse over thing is not working here
.wrapper {
position: relative;
overflow: hidden;
height: 25px;
width: 100px;
border: 1px solid orange;
}
.wrapper p {
position: absolute;
margin: 0;
line-height: 25px;
white-space: nowrap;
animation: marquee 5s linear infinite;
}
#keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
<div class="wrapper">
<p>Hey, how you're doing? .</p>
</div>
There are lots of information on google about it, just search: "css3 marque", like Neil Kennedy mentioned. One question is very similar to yours and the text stops scrolling after you hover over it. Check this link below: CSS3 Marquee Effect and jsfiddle: http://jsfiddle.net/MaY5A/1/
$(".toggle").on("click", function() {
$(".marquee").toggleClass("microsoft");
});
/* Make it a marquee */
.marquee {
width: 450px;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
border: 1px green solid;
}
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
border: 1px red solid;
animation: marquee 15s linear infinite;
}
.marquee span:hover {
animation-play-state: paused
}
/* Make it move */
#keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
/* Make it pretty */
.microsoft {
padding-left: 1.5em;
position: relative;
font: 16px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
/* ::before was :before before ::before was ::before - kthx */
.microsoft:before,
.microsoft::before {
z-index: 2;
content: '';
position: absolute;
top: -1em;
left: -1em;
width: .5em;
height: .5em;
box-shadow: 1.0em 1.25em 0 #F65314, 1.6em 1.25em 0 #7CBB00, 1.0em 1.85em 0 #00A1F1, 1.6em 1.85em 0 #FFBB00;
}
.microsoft:after,
.microsoft::after {
z-index: 1;
content: '';
position: absolute;
top: 0;
left: 0;
width: 2em;
height: 2em;
background-image: linear-gradient(90deg, white 70%, rgba(255, 255, 255, 0));
}
/* Style the links */
.vanity {
color: #333;
text-align: center;
font: .75em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
.vanity a,
.microsoft a {
color: #1570A6;
transition: color .5s;
text-decoration: none;
}
.vanity a:hover,
.microsoft a:hover {
color: #F65314;
}
/* Style toggle button */
.toggle {
display: block;
margin: 2em auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Wanted to see how easily marquees could be constructed with CSS:
- This demo uses -prefix-free to avoid vendor prefixes
- It also requires manual setting of the end text-indent
- Everything below the /* Make it pretty */ comment is non-essential
- Brought to you by #jonathansampson -->
<p class="microsoft marquee"><span>Windows 8 and Windows RT are focused on your life—your friends and family, your apps, and your stuff. With new things like the Start screen, charms, and a Microsoft account, you can spend less time searching and more time doing.</span></p>
<button class="toggle">Toggle Beautification</button>
<p class="vanity">
#jonathansampson of
#appendTo
</p>
How can i change the size of a container on hover so that it looks like in the Picture. Is it possible with only css/Smarty?
Here is the Link to the Picture: http://www.bilder-upload.eu/upload/bc5052-1485274659.jpg
You can create that zoom effect that zooms over other elements using transform: scale(). Here's an example.
img {
max-width: 200px;
transition: transform .5s;
transform-origin: 50% 0;
background: #fff;
}
footer {
background: #111;
color: #fff;
padding: 2em 0;
}
.shirts {
text-align: center;
}
a:hover img {
transform: scale(1.2);
}
<div class="shirts">
<img src="https://www.customink.com/mms/images/catalog/styles/4600/catalog_detail_image_medium.jpg">
<img src="https://www.customink.com/mms/images/catalog/styles/4600/catalog_detail_image_medium.jpg">
</div>
<footer>footer</footer>
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>