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>
Related
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%;
}
I have a sprite image containing 4 different pictures. They are 520px in height. I would like animate them sliding from the first picture to the last picture. I am able to get them to flip through images, however I cannot get them to slide smoothly. Also, when the last image is reached, I need to slide back to the first image. I am unsure how to do this, this is my current code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>FVRC Pics</title>
<meta charset="UTF-8">
<link type="text/css" href="styles/normalize.css" rel="stylesheet" />
<link type="text/css" href="styles/my_style.css" rel="stylesheet">
</head>
<body>
<h1> Fox Valley Runner Club</h1>
<div class="container">
<div id="slider">
<div id="leftArrow"</div>
<div id="rightArrow"></div>
</div>
</div>
<div id="startApp">
<ul>
<li>Start here!</li>
</ul>
</div>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>-->
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$("#leftArrow").click(function() {
$("#slider").css("backgroundPostionX","+=792px");
});
$("#rightArrow").click(function() {
$("#slider").css("backgroundPostionX","-=792px");
});
});
</script>
</body>
</html>
CSS:
h1 {
color: #0000ff; /*blue*/
font-size: 44px;
padding-left: 10%;
}
.container {
max-height: 520px;
background-color: #808080; /*grey*/
}
#leftArrow, #rightArrow {
display: inline-block;
width: 38px;
height: 50px;
}
#leftArrow {
position: relative;
/*top: 0;*/`enter code here`
top: 235px;
left: 2%;
width: 5%;
height: 50px;
background: url('../images/left_arrow.png') 0 0 no-repeat;
z-index: 10;
}
#rightArrow {
position: relative;
/*top: 0;*/
top: 235px;
left: 87.5%;
width: 5%;
height: 50px;
background: url('../images/right_arrow.png') bottom right no-repeat;
z-index: 10;
}
#slider {
position: relative;
height: 520px;
max-width: 792px;
margin: 0 auto;
/*background: url("../images/Animate-Sprite_520a.png") -0 0 no-repeat;*/
background-image: url('../images/Animate-Sprite_520a.png');
background-repeat: no-repeat;
}
#startApp {
width: 235px;
margin: 0 auto;
}
#startApp ul {
list-style-type: none;
}
#startApp ul li a {
display: inline-block;
text-decoration: none;
width: 150px;
text-align: center;
background-color: steelblue;
border: 2px solid #808080;
color: white;
font-size: 32px;
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 3 years ago.
I am a new learner and can you tell me my bad habits with my code and why this space between image and "Ford" text never closes.
<!DOCTYPE html>
<html>
<title>FiyaskoCar|En Pahalı Arabalar</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 100%;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
}
.text {
color: white;
font-size: 60px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
white-space: nowrap;
}
figure
{
display: flex;
flex-flow: column;
max-width: 323px;
margin: auto;
}
a
{
text-decoration:none;
}
table {
border-spacing: 90px 0;
}
figcaption {
background-color: #222;
color: #fff;
font: italic smaller sans-serif;
padding: 5px;
text-align: center;
}
.special
{
width: 299px; height: 166px;
}
</style>
</head>
<body bgcolor="#6B0808" text-color="white" >
<font size = "6">
<center> <img src=logo.png align="middle" height="140" width="140"/> </center>
<hr width="500">
<center>
<p style="background-color:hsla(9, 100%, 64%, 0.5);"><font face = "Comic sans MS" size="5">Fiyasko<span style="color:red">Car</span>
Burada her şey ÇOK PAHALI!!!
</p></font>
<table>
<tr>
<figure>
<td>
<div class="container">
<a href = homepage.html><img src=fordcar.png class="special">
<div class="overlay">
<div class="text">Ford</div>
</div>
</div>
<figcaption>Ford</figcaption></a>
</td>
<td> <div class="container">
<a href = homepage.html><img src=volkswagencar.png class="special">
<div class="overlay">
<div class="text">Volkswagen</div>
</div>
</div>
<figcaption>Volkswagen</figcaption> </td></a>
<td> <div class="container">
<a href = homepage.html><img src=bmwcar.jpg class="special">
<div class="overlay">
<div class="text">BMW</div>
</div>
</div>
<figcaption>BMW</figcaption>
</td></a>
</figure>
</table>
</font>
<hr>
</body>
</html>
This issue happens because the img tag CSS style is not set to display block
img,
img.special
{
display: block;
}
the code above will solve the issue for you.
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>
$("#colour").change(function(event) {
console.log($(this).val());
});
input[type=color] {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='color' value='#fefefe' class='bar' id='colour'>
Even though I made the <input type='color'> rounded, when I input a value (at least on safari) it changes the circle to a square instead. How can I do this? thanks.
My idea:
create one inline-block <span>
set input[type=color] to not visible.
bind click event of <span> to trigger <input>.click().
Because <input> is not friendly for shape customization.
$("#colour").change(function(event) {
console.log($(this).val());
$("#color_front").css('background-color',$(this).val());
});
$("#color_front").click(function(event) {
$("#colour").click();
});
input[type=color] {
display: none;
}
span {
border-radius: 50%;
width: 100px;
height: 100px;
background-color:red;
display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="color_front"></span>
<input type='color' value='#fefefe' class='bar' id='colour'>
In a similar situation earlier, what I did for this was to add two extra styles with pseudo-selectors ::-webkit-color-swatch and ::-webkit-color-swatch-wrapper.. Don't know the exact reason..Somehow got this answer at that time (probably from SO itself ;) )..
Add,
input[type=color]::-webkit-color-swatch {
border: none;
border-radius: 50%;
padding: 0;
}
input[type=color]::-webkit-color-swatch-wrapper {
border: none;
border-radius: 50%;
padding: 0;
}
See the snippet below..
$("#colour").change(function(event) {
console.log($(this).val());
});
input[type=color] {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
}
input[type=color]::-webkit-color-swatch {
border: none;
border-radius: 50%;
padding: 0;
}
input[type=color]::-webkit-color-swatch-wrapper {
border: none;
border-radius: 50%;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='color' value='#fefefe' class='bar' id='colour'>
UPDATE
I think I got the tutorial from which I got the solution.. Here is it..
I personally like this solution because it does not involve JS.
<style>
.color-input-wrapper {
height: 1.5em;
width: 1.5em;
overflow: hidden;
border-radius: 50%;
display: inline-flex;
align-items: center;
position: relative;
}
.color-input-wrapper input[type=color] {
position: absolute;
height: 4em;
width: 4em;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
border: none;
margin: 0;
padding: 0;
}
</style>
<div class="color-input-wrapper">
<input type="color">
</div>
Use the following code, it will definitely work.
input {
width: 50px;
height: 50px;
border-color: black;
color: black;
background-color: #fff;
border: none;
cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
border-radius: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="color" name="color-gradient-1" id="color1" value="#ff0000" />
</body>
</html>
Use the following code, it will definitely work
input[type="color"]::-webkit-color-swatch {
border: none;
border-radius: 10px;
}