This is my first time posting sorry in advance, this is my first time trying to make a website for uni.
Im trying to make 2 things happen to my image on hover, I want it to:
blur
make text appear
Ive managed to make it blur but cant seem to make any text appear on top of the blur.
CSS:
'''.container {
display: flex;
flex-wrap: nowrap;
width: 100vw;
height: 100vh;
justify-content: space-evenly;
}
.fern {
max-width: 50vw;
max-height: 100vh;
}
img {
max-width:100%;
max-height: 80vh;
}
.venus {
max-width: 50vw;
}
.venus:hover {
-webkit-filter:blur(10px);
transition: .5s ease;
cursor: pointer;
}
.fern:hover {
-webkit-filter:blur(10px);
transition: .5s ease;
cursor: pointer;
}
'''
HTML:
<body>
<h1 class="guide">
a guide to wellness and growth
</h1>
<div class="container">
<div class="fern">
<img src="./assets/images/fern_nobg.png" alt="fern_nobg">
</div>
<div class="venus">
<img src="./assets/images/venus_nobg.png" alt="venus_nobg">
</div>
</div>
</div>
</body>
I have tried this
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_display_element_hover
and
https://www.youtube.com/watch?v=W0ubfqwd4G4
and neither of them worked.
This is what im trying to make:
You can apply filter to img instead of applying to entire div. I have added text in span elements, and set display: none; as default. On hover, you could change it to display: block;.
If you want to animate it as well, you can use opacity.
.container {
display: flex;
flex-wrap: nowrap;
width: 100vw;
height: 100vh;
justify-content: space-evenly;
}
.fern {
max-width: 50vw;
max-height: 100vh;
}
img {
max-width: 100%;
max-height: 80vh;
transition: .5s ease;
}
.venus {
max-width: 50vw;
transition: .5s ease;
}
.text{
display: none;
}
.venus:hover img {
-webkit-filter: blur(10px);
cursor: pointer;
}
.fern:hover img {
-webkit-filter: blur(10px);
transition: .5s ease;
cursor: pointer;
}
.fern:hover .text, .venus:hover .text{
display: block;
}
<body>
<h1 class="guide">
a guide to wellness and growth
</h1>
<div class="container">
<div class="fern">
<img src="https://www.pngjoy.com/pngm/48/1094382_ferns-ostrich-fern-transparent-png.png" alt="fern_nobg">
<span class="text">Fern</span>
</div>
<div class="venus">
<img src="https://assets.stickpng.com/images/580b585b2edbce24c47b2712.png" alt="venus_nobg">
<span class="text">Venus</span>
</div>
</div>
</body>
Related
<body>
<div class="circle"> <p>projects</p></div>
</body>
body {
div {
width:100%;
max-width: 250px;
height:250px;
background-color:red;}
.circle:hover {
border-radius: 50%;
background-color:yellow;
transform: rotate(0.5turn);
transition:all .35s ease;
}
.circle:hover p {
pointer-events: none;
}
}
Hi everyone,
totally new to html and css here and trying to experiment an idea but can't figure it out
how to apply the hover effect only to the <div> element , but will not affect the <p> tag inside it?
the idea is that I need <p> in the centre of div and remain the same place (or upside down) while div is hovered
idea visualization
You don not need to rotate the element to achieve the result from your image.
First you can use flexbox properties to center the p inside your div and use :hover on div to change its border radius.
.circle {
width:100%;
max-width: 150px;
height: 150px;
background-color: red;
transition: all 0.5s;
display: flex;
justify-content: center;
align-items: center;
}
.circle:hover {
border-radius: 50%;
background-color: yellow;
}
<div class="circle">
<p>projects</p>
</div>
i need some help with a css slide loop,
Its working but the slide is not smooth, there is a jittering and there is a jump at the end the loop.
I kept changing the keyframe but i just cant find a way to make is smooth without jittering
So here's the code :
thats the container :
.container {
max-width: 1140px;
position: relative;
width: 100%;
margin: auto;
text-align : center ;
overflow : hidden;
}
// here the column where the images slides
.col-lg-3 {
animation: slide 15s linear infinite;
margin: 20px 5px ;
}
#keyframes slide {
0% {transform: translate(0)}
100% { transform: translateX(calc(-250px * 5))}
}
Pretty sure that there must be a better solution. But you need to ask better question i think.
I still don't know what do you need, but check this maybe it will help.
I create a box full of images and give that box a margin-left (comes from justify content: end inside parent container(main-container)) and cover it with another box (cover-container) which have a position:absolute on it. and have a higher z-index than main-container and same background-color with main-container.
In animation i gave
100% {
transform: translateX(-600%);
}
-600% because i have 5 images and when i give 5 width it acts like it is jumping as you said in your question but when giving 600% (5 + 1) it acts better like continious loop.
img{
display: block;
max-width: 100%;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body{
min-height: 100vh;
overflow: hidden;
position: relative;
margin:0;
}
.container {
max-width: 1200px;
display: grid;
place-content: center;
margin: 0 auto;
background-color: bisque;
height: 100vh;
}
.main-container{
display: flex;
overflow : hidden;
justify-content: end;
}
.cover-container {
position: absolute;
display: grid;
place-content: center;
height: 400px;
width: 900px;
z-index: 999;
margin-left: 300px;
background-color: bisque;
overflow: hidden;
}
.image-container{
position: relative;
display: flex;
width: 75%;
height: 400px;
}
img{
animation: slide 7.5s linear infinite;
}
#keyframes slide {
0% {
transform: translate(0);
}
100% {
transform: translateX(-600%);
}
}
<div class="container">
<div class="main-container">
<div class="cover-container"></div>
<div class="image-container">
<img src="https://source.unsplash.com/random/300x400" alt="" />
<img src="https://source.unsplash.com/random/300x400" alt="" />
<img src="https://source.unsplash.com/random/300x400" alt="" />
<img src="https://source.unsplash.com/random/300x400" alt="" />
<img src="https://source.unsplash.com/random/300x400" alt="" />
</div>
</div>
</div>
I'm trying to do something like this demo. As the page scrolls down, the various parts become visible. I added a jsfiddle here. As you can see, when the second line of text is hovered it overwrites the line above it. I know my code is using hover and the demo site changes with scrolling but I thought this would be easier to get to work first.
Would someone please explain how do I make it so only the contents of the div with ID changeme is enlarged without affecting the others? Here's my code:
<style>
#changeme {
height: 50px;
width:100px;
transition: all .5s ease-in-out;
}
#changeme:hover {
height: 200px;
width:100px;
transform: scale(1.5);
}
</style>
<div>
<h1>Title</h1>
<div>
<div>Main text<div>
<div id="changeme">
<div>Some Text</div>
<div><img src="example.png"></div>
</div>
</div>
</div>
Run this in full-page mode. Here you go:
var ScrollFunction = function() {
var y = window.scrollY;
var viewport = window.innerWidth;
var counter = (y/viewport) * 100;
if ( counter >= 10) {
document.getElementById("containerOne").className = "container show"
}
if (counter >= 20) {
document.getElementById("containerTwo").className = "container show"
}
if (counter >= 30) {
document.getElementById("containerThree").className = "container show"
}
};
window.addEventListener("scroll", ScrollFunction);
*{
margin: 0;
padding: 0;
box-sizing: border-box;
color: #fff;
}
body{
height: 200vh;
background-color: #313131;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.container{
width: 80%;
height: 500px;
border: 1px solid rgb(126, 126, 126);
margin-bottom: 5vh;
display: none;
justify-content: center;
align-items: center;
flex-direction: row;
}
.box{
width: calc(80%/4);
display: flex;
height: 50%;
opacity: 1;
margin-left: 10px;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.185);
animation: 1s 1 linear normal showUp;
transition: .4s all;
}
.box:first-child{
margin: 0;
}
.box:hover{
transform: scale(1.5);
}
.show{
display:flex;
}
#keyframes showUp {
0%{
height: 0;
opacity: 0;
display: none;
}
100%{
display: flex;
height: 50%;
opacity: 1;
}
}
<div id="containerOne" class="container">
<div class="box">MyBox1</div>
<div class="box">MyBox2</div>
<div class="box">MyBox3</div>
<div class="box">MyBox4</div>
</div>
<div id="containerTwo" class="container">
<div class="box">MyBox1</div>
<div class="box">MyBox2</div>
<div class="box">MyBox3</div>
<div class="box">MyBox4</div>
</div>
<div id="containerThree" class="container">
<div class="box">MyBox1</div>
<div class="box">MyBox2</div>
<div class="box">MyBox3</div>
<div class="box">MyBox4</div>
</div>
If you want to change the size of an element on hover without affecting others then you can use just the transform: scale.
If you also (or instead of) alter the width and/or height then unless the element is positioned in some non-relative way it will 'disturb' elements around it.
So try:
#changeme:hover {
transform: scale(1.5);
}
When you come to want to expand elements as they come into view, investigate IntersectionObserver. You can attach an observer to each of those elements and as they appear you can transform them, or use CSS animate and/or a delay setting to get the sort of effects shown in the linked site.
I am attempting to create a front end screen, where there are images labeled step 1-4 next to each other the idea is that if the user hovers over one of these step that on the div below them the the relevant and corresponding image should fade in, and when they remove their cursor or move it to another step the image should fade out or be replaced by another image respectively. thus far I have been able to add in coding as to have the step 1 - 4 images being replaced by their correct images, but i am dumbfounded on how to get the transition effects happen on a completely different div. The code (HTML and CSS) I am using is included below.
HTML:
<div class="col-md-3">
<div class="swap-1" id="step1">
<a>
<img src="~/images/step1-cover.png" />
</a>
</div>
</div>
<div class="col-md-3">
<div class="swap-2" id="step2">
<a>
<img src="~/images/step2-cover.png" />
</a>
</div>
</div>
<div class="col-md-3">
<div class="swap-3" id="step3">
<a>
<img src="~/images/step3-cover.png" />
</a>
</div>
</div>
<div class="col-md-3">
<div class="swap-4" id="step4">
<a>
<img src="~/images/step4-cover.png" />
</a>
</div>
</div>
#*the div below is where the corresponding images should appear*#
<div id="steps" class="steps" style="height:300px; width:1000px;
margin-bottom:30px; margin-top:100px"></div>
CSS:
.swap-1 {
background-image: url(../images/step1.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 300px;
}
.swap-1 a {
display: block;
}
.swap-1 a img {
opacity: 1;
width: 300px;
height: auto;
display: block;
transition: all .6s ease-in;
}
.swap-1 a:hover img {
opacity: 0;
transition: all .6s ease-in;
}
.swap-2 {
background-image: url(../images/step2.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 300px;
}
.swap-2 a {
display: block;
}
.swap-2 a img {
opacity: 1;
width: 300px;
height: auto;
display: block;
transition: all .6s ease-in;
}
.swap-2 a:hover img {
opacity: 0;
transition: all .6s ease-in;
}
.swap-3 {
background-image: url(../images/step3.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 300px;
}
.swap-3 a {
display: block;
}
.swap-3 a img {
opacity: 1;
width: 300px;
height: auto;
display: block;
transition: all .6s ease-in;
}
.swap-3 a:hover img {
opacity: 0;
transition: all .6s ease-in;
}
.swap-4 {
background-image: url(../images/step4.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 300px;
}
.swap-4 a {
display: block;
}
.swap-4 a img {
opacity: 1;
width: 300px;
height: auto;
display: block;
transition: all .6s ease-in;
}
.swap-4 a:hover
img {
opacity: 0;
transition: all .6s ease-in;
}
If you are not limited to that specific HTML, you can do it way simpler...
simply put each 'slide' (.image) next to its 'tab' (.step) and you can access it with CSS using the '+' (next element) selector, like:
.step:hover + .image{ /* active slide css here */ }
Please check the code in the fiddle: https://jsfiddle.net/ck0bqy1h/
so I have a div which will include an image http://www.reversl.net/hovers/ and I'd like for the image to reveal two links when hovered like in layout shown here http://www.reversl.net/demo/ Is it possible to achieve this using only css?
you can create the div with links and in css:
div.myimage div.links { display:none;}
div.myimage:hover div.links { display:block;}
sample html:
<div class="myimage">
<div class="links"> we are the links</div>
<img src="animage.png" />
</div>
obviously you have to setup yourself div positioning
Another way you could do it with display:none/block
div.container { width: 200px; height: 200px; position: relative; }
div.container img { width: 100%; height: 100%; position: absolute; top: 0; }
div.container div { width: 100%; position: absolute; top: 0; display: none; }
div.container img:hover + div { display: block; }
div.container div:hover { display: block; }
<div class="container">
<img src="an_img.jpg">
<div> A link should be here </div>
</div>
You could always use 'opacity'.
Your markup would be something like this:
<div class="wrapper">
<img src="example.png" alt="example" />
<ul class="links">
<li>Example Link</li>
<li>Example Link</li>
</ul>
</div>
Then in CSS:
.wrapper {
position: relative; /*so the absolute positioning works */
}
.links {
position: absolute;
top: 0;
left: 0;
opacity: 0; /*hidden by default */
width: 100%;
height: 25px; /*making this up */
}
.wrapper:hover .links, .wrapper:focus .links {
opacity: 1; /*visible on hover */
}
A couple caveats to this technique:
You will need to use an opacity filter for IE8 and below, as they don't understand the opacity CSS property
I would NOT recommend this technique for navigation, as you seem to be intending. Users on touch devices (smartphones and tablets) don't really have the "hover" state to rely on.
If you want some bonus points, though, for users with modern browsers, add this:
.links {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
And the links will 'fade' in - all with CSS.
if you want to hover over the image only:
div.container { width: 200px; height: 200px; position: relative; }
div.container img { width: 100%; height: 100%; position: absolute; top: 0; }
div.container img:hover { z-index: -1; }
div.container div { width: 100%; position: absolute; top: 0; }
div.container div:hover { z-index: 1; }
(the last one is needed to eliminate flicker when hovering over the links)
<div class="container">
<div> A link should be here </div>
<img src="an_img.jpg">
</div>