Blur image and show text over image (css) - javascript

I have 2 images, which upon hover over I'd like to blur and show text on top. However, currently it appears that the images only blur when the cursor is at its edge but not when the cursor is in the middle. I'd like the image to blur AND show its text. Does anyone have advice on where I might be going wrong?
Also, any advice on how to better position the text within the images would be great. I think my "position" or "display" is off. Thank you!
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<style media="screen">
.study-icons {
width: 300px;
padding-left: 25px;
padding-right: 25px;
cursor: pointer;
/* border: 2px solid blue; */
}
.study-icons:hover {
-webkit-filter: blur(10px);
filter: blur(10px);
}
.study-wrapper {
display: inline-block;
text-align: center;
padding-bottom: 0px;
}
.img__wrap {
position: relative;
height: 255px;
width: 300px;
}
.img__description_layer {
position: absolute;
top: 0;
bottom: 0;
left: 10;
right: 0;
/* background: rgba(36, 62, 206, 0.6); */
color: black;
visibility: hidden;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
/* transition effect. not necessary */
transition: opacity .2s, visibility .2s;
}
.img__wrap:hover .img__description_layer {
visibility: visible;
opacity: 1;
}
.img__description {
transition: .2s;
transform: translateY(1em);
}
.img__wrap:hover .img__description {
transform: translateY(0);
}
</style>
<body>
<div class="img__wrap">
<div id="image1">
<img class="img__img study-icons" src="assets/studies/image1.png">
<div class="img__description_layer">
<p class="img__description">Sample text here about image1?</p>
</div>
</div>
</div>
<div class="img__wrap">
<div id="image2">
<img class="img__img study-icons" src="assets/studies/image2.png">
<div class="img__description_layer">
<p class="img__description">Sample text here about image2</p>
</div>
</div>
</div>
</body>
</html>

to fix this please assign the hovering to be on the img__wrap
In order to make sure your text centered you have to make the .ing__wrap positioned as relative, then set the .img__description_layer to be like this:
Position:absolute;
Top:50%;
Left:50%;
Transform:translate(-50%,-50%);

Related

Flip of cards 180deg (HTML,CSS,JS)

I have a problem that my cards rotate, but each card moves to ~5px (X-axis). How can I rotate them without this movement? (Just like rotate it around itself). I've read many specs and watched many videos. Nothing could help me.
Besides, whenever I click on some cards to return them in a previous state, some of them do it for a second or even a third time.
const cards = document.querySelectorAll(".memory-card")
function flip() {
this.classList.toggle("flip")
}
cards.forEach((c) => c.addEventListener("click", flip))
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
background: linear-gradient(50deg, rgb(198, 193, 188), rgb(153, 145, 137), rgb(109, 101, 94));
background-size: 100%;
background-repeat: no-repeat;
height: 100vh;
width: 100vw;
position: fixed;
}
.wrapper {
display: grid;
grid-template: 15vmin/ 20vmin 20vmin 20vmin 20vmin;
justify-content: center;
align-items: center;
padding-top: 8vmin;
margin-left: -2vmin;
perspective: 1000px;
grid-gap: 8vmin 4vmin;
}
/*flip moment*/
.memory-card {
width: calc(25%-10px);
height: calc(14vmin - 2px);
position: relative;
transform: scale(1);
transform-style: preserve-3d;
margin: 2vw;
transition: .5s;
border-radius: 23%;
box-shadow: 1vmin 1vmin 1vmin 2px silver;
transition: transform .5s;
}
.memory-card.flip {
transform: rotateY(180deg);
}
.memory-card:active {
transform: scale(0.94);
transition: .05s;
}
.front {
position: absolute;
width: 19vmin;
height: 19vmin;
border-radius: 15px;
backface-visibility: hidden;
transform: rotateY(180deg);
}
.end {
position: absolute;
width: 19vmin;
height: 19vmin;
border-radius: 15px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=U TF-8>
<meta http-equiv="X-UA-Compatible">
<meta name="viewport" content="width = device-width, initial-scale = 1.0">
<link rel="stylesheet" href="index.css">
<title> Memory Game </title>
</head>
<body>
<section class="wrapper">
<div class="memory-card">
<img src="https://images.unsplash.com/photo-1484589065579-248aad0d8b13?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=918&q=80" alt="space" class="front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/A_black_image.jpg/1600px-A_black_image.jpg?20201103073518" alt="a black card" class="end">
</div>
<div class="memory-card">
<img src="https://images.unsplash.com/photo-1516339901601-2e1b62dc0c45?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=671&q=80" alt="space" class="front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/A_black_image.jpg/1600px-A_black_image.jpg?20201103073518" alt="a black card" class="end">
</div>
<div class="memory-card">
<img src="https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" alt="space" class="front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/A_black_image.jpg/1600px-A_black_image.jpg?20201103073518" alt="a black card" class="end">
</div>
</section>
<script src="index.js"></script>
</body>
</html>
Add transform-origin when your cards flip. This property allows you to change the position of transformed elements. Learn more at w3schools:
.memory-card.flip {
transform: rotateY(180deg);
transform-origin: 85% 50%;
}

Make buttons stick to background image

I am currently working on an interactive simulation with an image as a background. Like this:
<body>
<div>
<img><img>
<button><button>
<!-- etc.. -->
<div>
<body>
Is it possible to make the buttons stick to the image when resizing the window. I've already tried things like setting the positions with a percentage instead of pixels etc. But nothing seems to work.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 100%;
max-width: 400px;
}
.container img {
width: 100%;
height: auto;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn:hover {
background-color: black;
}
</style>
</head>
<body>
<h2>Button on Image</h2>
<p>Add a button to an image:</p>
<div class="container">
<img src="img_snow.jpg" alt="Snow" style="width:100%">
<button class="btn">Button</button>
</div>
</body>
</html>

Fix position of button on image

I'm trying to fix a button over a specific spot in an image. Is there any way to merge the button with a specific part of an image? This is what I have so far
I have the button exactly where I want it but when the browser is stretched or zoomed in, the button doesn't stay.
Here's the JSFiddle of what I have
https://jsfiddle.net/vkfLywna/1/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: absolute;
width: 100%;
max-width: 400px;
}
.container img {
width: 200%;
height: auto;
}
.container .btn {
position: relative;
top: -330px;
left: 96px;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 6px;
padding: 4px 10spx;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn:hover {
background-color: black;
}
</style>
</head>
<body>
<div class="container">
<img src="doc.png.png" alt="img" style="width:100%">
<button class="btn">Button</button>
</div>
</body>
</html>
Wrap the img and the button with a div and position them accordingly:
.img-container {
border: solid red 1px;
display: inline-block;
position: relative;
}
.img-container button {
position: absolute;
top: 50px;
left: 50px;
}
<div class="img-container">
<img src="http://via.placeholder.com/350x150">
<button>Click here</button>
</div>
the .container has to be position:relative and .btn position:absolute. Than you can positionate the button with top and left in the container, use % instead of px to stay responsive.
you don't need transform for this.
.container {
position:relative;
width:100%;
}
.container img {
width:100%;
height:auto;
}
.container button {
position:absolute;
top:20%;
left:20%;
}
<div class="container">
<img src="https://dummyimage.com/600x400/ff00ff/fff">
<button>
Click
</button>
</div>

Page transition with CSS

I want to add Full Page Transition to my project to look like Single Page Application, but I'm stuck.
I tried a lot of things with transform: translateX and transition and display: none, but it doesn't work properly as I want..
var firstDiv = document.querySelector('#first'),
secondDiv = document.querySelector('#second'),
transitionBtn = document.querySelector('#transitionBtn');
function myFunction() {
firstDiv.classList.remove('active');
secondDiv.classList.add('active');
}
transitionBtn.addEventListener('click',myFunction);
body {
padding: 0;
margin: 0;
}
#first {
display: flex;
justify-content: center;
align-items: center;
background-color: red;
}
#second {
background-color: blue;
}
.page{
width: 100vw;
height: 100vh;
transform: translateX(100%);
display: none;
transition: ease-in-out 2s all;
}
.page.active {
transform: translateX(0%);
display: flex !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="first" class="page active">
<button id="transitionBtn">Click me to transition</button>
</div>
<div id="second" class="page"></div>
</body>
</html>
var firstDiv = document.querySelector('#first'),
secondDiv = document.querySelector('#second'),
transitionBtn = document.querySelector('#transitionBtn');
function myFunction() {
firstDiv.classList.remove('active');
secondDiv.classList.add('active');
}
transitionBtn.addEventListener('click',myFunction);
body {
padding: 0;
margin: 0;
overflow:hidden;
}
#first {
display: flex;
justify-content: center;
align-items: center;
background-color: red;
}
#second {
background-color: blue;
transform: translateX(-100%);
}
.page{
width: 100vw;
height: 100vh;
transform: translateX(100%);
transition: ease-in-out 2s all;
position:absolute;
}
.page.active {
transform: translateX(0%) !important;
display: flex !important;
}
<div id="first" class="page active">
<button id="transitionBtn">Click me to transition</button>
</div>
<div id="second" class="page"></div>
I suppose you wish have no scroll visible, in order to create exit effect ?! if yes, then "overflow: hidden" on body tag helps =)

How to make the splash page div fade after being clicked

This is my first post - anyways - I was referencing this original ask Welcome screen before website loads (Click to enter) [Splash Screen]
After following the instructions of the second answer where I created two seperate divs I need help figuring out how to use javascript to change the visibility of the splash div when/after the user clicks through the splash.
I have a pretty basic understanding of code and not much else but I'm decent at picking up concepts. Here's what I've got so far:
<!Splash html>
<html>
<head>
<meta charset="utf-8" />
<style>
html, body {
margin: 0;
padding: 0
}
div#splash {
max-width: 100%;
height: 100%;
background-image: url("brightsplash.jpg");
background-repeat: no-repeat;
background-size: cover;
}
div#post-splash {
display: none;}
</style>
<div id="splash">
</div>
<div id="post-splash"></div>
<h1>Taylor Forrest</h1>
<h2>photography</h2>
<h2>About</h2>
<h2>Portfolio</h2>
<h2>Contact</h2>
</html>
Pure CSS (no javascript) alternative with undercover checkbox:
html {
width: 100%;
height: 100%;
background: lavender;
text-align: center;
font-family: arial, sans-serif;
}
input {
display: none;
}
#target {
opacity: 0;
background-color: rosybrown;
background: url('http://i.imgur.com/P9L9jzT.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: -1;
pointer-events: none;
user-select: none;
-webkit-user-select: none;
-webkit-transition: all 2s; /* Safari */
transition: all 2s;
}
#click:checked ~ label > #target {
opacity: 1;
z-index: 200;
cursor: pointer;
pointer-events: auto;
}
#replay {
color: crimson;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 20px;
cursor: pointer;
}
#warning {
color: white;
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
}
<input type="checkbox" id="click" checked/>
<label for="click">
<div id=target><h1 id=warning>WELCOME</h1></div>
<span id=replay><small>-replay-</small></span>
</label>
<p>page content</p>
You're code is messy - you're missing tags, missplaced some content etc. I suggest you learn more abouth html and css and use proper IDE with syntax higlighting. Anyway here's the code that will do what you expect. This is still far from perfect.
<html>
<head>
<meta charset="utf-8" />
<style>
html,
body {
margin: 0;
padding: 0
}
#splash {
max-width: 100%;
height: 100%;
background-image: url("brightsplash.jpg");
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}
#post-splash {
display: none;
}
</style>
</head>
<body>
<div id="splash">
</div>
<div id="post-splash">
<h1>Taylor Forrest</h1>
<h2>photography</h2>
<h2>About</h2>
<h2>Portfolio</h2>
<h2>Contact</h2>
</div>
<script>
(function() {
var splash = document.getElementById('splash'),
postSplash = document.getElementById('post-splash');
splash.addEventListener('click', function() {
splash.style.display = "none";
postSplash.style.display = "block";
});
})();
</script>
</body>
</html>

Categories