how to align icons inside the text box in react js?

how to align icons inside the text box in react js? - javascript

I need to place mail icon and password icon inside the text box, how to align items properly
my js code is:
return (
<div className="container">
<div className="login">
<img src={pacifyr} alt="logo"/>
<img src={Envelope} alt="username"/>
<input placeholder='username' />
<img src={Lock} alt="username"/>
<input placeholder='password' />
</div>
</div>
);

You can use the CSS positions to achieve this (https://developer.mozilla.org/en-US/docs/Web/CSS/position)
return (
<div className="container">
<div className="login">
<img src={pacifyr} alt="logo"/>
<div className="position-relative">
<img className="position-absolute" src={Envelope} alt="username"/>
<input placeholder='username' />
</div>
<div className="position-relative">
<img className="position-absolute" src={Lock} alt="username"/>
<input placeholder='password' />
</div>
</div>
</div>
)
<style>
.position-relative{
position: relative;
}
.position-relative input{
padding: 10px 10px 10px 30px;
}
.position-absolute{
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
}
</style>

* {
box-sizing: border-box;
}
.row {
margin: 10px 0;
width: 100%;
max-width: 300px;
border: 1px solid #e0e0e0;
display: flex;
align-items: center;
border-radius: 6px;
}
.row .icon {
padding: 7px 10px;
border-right: 1px solid #e0e0e0;
}
.row .icon img {
width: 26px;
height: auto;
display: block;
}
.row input {
border: none;
outline: none;
padding-left: 20px;
}
<div class="row">
<div class="icon">
<img src="https://www.iconninja.com/files/618/860/906/internet-google-message-gmail-computer-email-icon.svg" alt="">
</div>
<input type="text" placeholder="Email/Username">
</div>
<div class="row">
<div class="icon">
<img src="https://www.iconninja.com/files/618/860/906/internet-google-message-gmail-computer-email-icon.svg" alt="">
</div>
<input type="text" placeholder="Password">
</div>

You can use flexbox for layout
<div className="container">
<div className="login">
<div className="row">
<img alt="logo"/>
</div>
<div className="row">
<img className="icon" alt="username"/>
<input placeholder="username" className="field"/>
</div>
<div className="row">
<img className="icon" alt="password"/>
<input placeholder="password" className="field"/>
</div>
</div>
</div>
And flexbox style need to be like below
.login {
width: 300px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
}
.row {
margin: 10px;
display: flex;
flex-direction: row;
height: 30px;
justify-content: center;
}
.icon {
width: 50px;
}
.field {
flex: 1;
}

Related

How to toggle the "parent" div when all "child" div are toggled (filtered as no result)?

I am making an instant search function using .filter() and .toggle().
It is basically working, but I would like to make the "search result" better by hiding the whole parent .char-section div section when there is no result inside (ie. no .item in the below example).
For example, when searching for banana, the script currently works like this:
https://i.stack.imgur.com/UMrbK.png
The desired result should look like this :
Here is the script:
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$(".item").filter(function () {
$(this).toggle(
$(":is(.title)", this)
.text()
.toLowerCase()
.includes(value.toLowerCase())
);
});
});
});
body {
margin: 30px;
}
form {
margin-bottom: 10px;
}
.title {
display: block;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 10px;
font-size: 17px;
line-height: 1.25em;
font-weight: 700;
}
.char {
position: absolute;
left: 0%;
top: 0%;
right: auto;
bottom: auto;
z-index: 3;
display: inline-block;
margin-top: 20px;
margin-bottom: 0px;
margin-left: 2px;
padding-top: 0px;
padding-bottom: 0px;
color: #036;
font-size: 26px;
line-height: 1em;
}
.item {
position: relative;
top: -20px;
width: 100%;
margin-top: 0px;
margin-bottom: 10px;
padding-top: 8px;
padding-bottom: 8px;
}
.list {
position: relative;
left: 0%;
top: 0%;
right: 0%;
bottom: auto;
width: 100%;
margin-top: 0px;
margin-bottom: 0px;
padding: 2px 0px 2px 80px;
}
.char-section {
position: relative;
width: 100%;
height: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 30px 0px;
border-bottom: 3px solid #ddd;
}
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.min.js"></script>
<form>
<input type="search" placeholder="Quick Search" class="h-filter-search" id="myInput">
<input type="reset" id="reset-btn" value="Reset">
</form>
<div class="ab-wrapper">
<div id="A" class="char-section">
<h5 class="char">A</h5>
<div class="list">
<div class="item">
<p class="title">Apple</p>
</div>
<div class="item">
<p class="title">Apple Juice</p>
</div>
<div class="item">
<p class="title">Avocado</p>
</div>
</div>
</div>
<div id="B" class="char-section">
<h3 class="char">B</h3>
<div class="list">
<div class="item">
<p class="title">Banana</p>
</div>
<div class="item">
<p class="title">Boiled Eggs</p>
</div>
<div class="item">
<p class="title">Bamboo Juice</p>
</div>
</div>
</div>
<div id="C" class="char-section">
<h3 class="char">C</h3>
<div class="list">
<div class="item">
<p class="title">Candy</p>
</div>
</div>
</div>
<div id="D" class="char-section">
<h3 class="char">D</h3>
<div class="list">
<div class="item">
<p class="title">Disco</p>
</div>
<div class="item">
<p class="title">Decaffeinated Juice</p>
</div>
</div>
</div>
<div id="E" class="char-section">
<h3 class="char">E</h3>
<div class="list"></div>
</div>
<div id="F" class="char-section">
<h3 class="char">F</h3>
<div class="list">
<div class="item">
<p class="title">Decaffeinated Juice</p>
</div>
</div>
</div>
</div>
On CodePen: https://codepen.io/pen/qBYbdYx
☝️ Edit: updated with the script in answer
Big thanks for any idea!
PS. Another small problem is that reset button can only reset the input field, but not reset the whole results list. The user must focus the input and hit "Esc" key. I will put this as another question later.

I have to disagree with another answer:
if (hit) {
$(this).closest(".char-section").show();
} else {
$(this).closest(".char-section").hide();
}
With this code, the "char-section" is going to be visible if and only if the last item of the section is. So the "A" section won't be visible if the search is on "Apple", for example.
My suggestion is 1/ hide all the "char-sections" 2/ show them in the same each/filter loop if one of their "item" children is visible, as follows:
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
// hide all the sections
$(".char-section").hide();
// 'each' better than 'filter' here, because there's no filtering
$(".item").each(function () {
if ($("p.title", this).text().toLowerCase().includes(value))
// shows the item AND its "char-section" parent
$(this).show().parents(".char-section").show();
else
// hides the item, leaves its parent alone
$(this).hide();
});
});
});
HTH

This can be done rather easily. If we look at your html structure, we realize that the main 'container' <div> for an item, is of class char-section. So if we're searching through your title DIVs, we can get a reference to it's parent using:
.closest(".char-section")
on the object in question.
Now all we have to do is hide or show the whole container using the equally named show()/hide() methods in case the search was successful or not.
Here's an example:
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".item").filter(function(e) {
let hit = $(":is(.title)", this).text().toLowerCase().includes(value.toLowerCase());
$(this).toggle(hit);
if (hit) {
$(this).closest(".char-section").show();
} else {
$(this).closest(".char-section").hide();
}
});
});
});
body {
margin: 30px;
}
form {
margin-bottom: 10px;
}
.title {
display: block;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 10px;
font-size: 17px;
line-height: 1.25em;
font-weight: 700;
}
.char {
position: absolute;
left: 0%;
top: 0%;
right: auto;
bottom: auto;
z-index: 3;
display: inline-block;
margin-top: 20px;
margin-bottom: 0px;
margin-left: 2px;
padding-top: 0px;
padding-bottom: 0px;
color: #036;
font-size: 26px;
line-height: 1em;
}
.item {
position: relative;
top: -20px;
width: 100%;
margin-top: 0px;
margin-bottom: 10px;
padding-top: 8px;
padding-bottom: 8px;
}
.list {
position: relative;
left: 0%;
top: 0%;
right: 0%;
bottom: auto;
width: 100%;
margin-top: 0px;
margin-bottom: 0px;
padding: 2px 0px 2px 80px;
}
.char-section {
position: relative;
width: 100%;
height: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 30px 0px;
border-bottom: 3px solid #ddd;
}
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.min.js"></script>
<form>
<input type="search" placeholder="Quick Search" class="h-filter-search" id="myInput">
<input type="reset" id="reset-btn" value="Reset">
</form>
<div class="ab-wrapper">
<div id="A" class="char-section">
<h5 class="char">A</h5>
<div class="list">
<div class="item">
<p class="title">Apple</p>
</div>
<div class="item">
<p class="title">Apple Juice</p>
</div>
<div class="item">
<p class="title">Avocado</p>
</div>
</div>
</div>
<div id="B" class="char-section">
<h3 class="char">B</h3>
<div class="list">
<div class="item">
<p class="title">Banana</p>
</div>
<div class="item">
<p class="title">Boiled Eggs</p>
</div>
<div class="item">
<p class="title">Bamboo Juice</p>
</div>
</div>
</div>
<div id="C" class="char-section">
<h3 class="char">C</h3>
<div class="list">
<div class="item">
<p class="title">Candy</p>
</div>
</div>
</div>
<div id="D" class="char-section">
<h3 class="char">D</h3>
<div class="list">
<div class="item">
<p class="title">Disco</p>
</div>
<div class="item">
<p class="title">Decaffeinated Juice</p>
</div>
</div>
</div>
<div id="E" class="char-section">
<h3 class="char">E</h3>
<div class="list"></div>
</div>
<div id="F" class="char-section">
<h3 class="char">F</h3>
<div class="list">
<div class="item">
<p class="title">Decaffeinated Juice</p>
</div>
</div>
</div>
</div>

Filtering HTML content?

I am currently working on a webpage and I'd like for the images to be filtered based on the button presses. So if I press Holidays, it should only show images with the css class "holiday" assigned to them, etc.
I've already tried the following 2 approaches, but didn't get them to work. Probably a mistake from my side due to lacking a good understanding of javascript.
How to Filter Div Elements by W3Schools
Filtering from Drop Down Menu from a Stack Overflow post.
* {
box-sizing: border-box;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red; /* Just for Display purposes */
}
.row::after {
content: "";
clear: both;
display: table;
}
.button-container {
text-align: center;
}
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
}
.flex-content {
width: 20%;
padding: 5px;
}
<body>
<div class="row">
<div class="col-12">
<h1 style="text-align: center;">Image List</h1>
<div class="button-container">
<button class="button" >All</button>
<button class="button" >Holidays</button>
<button class="button" >Work</button>
</div>
</div>
</div>
<div class="row">
<div class="col-2"></div>
<div class="col-8">
<div class="flex-container">
<div class="flex-content">
<img src="https://via.placeholder.com/300" style="width: 100%;"/>
</div>
<div class="flex-content holiday">
<img src="https://via.placeholder.com/300" style="width: 100%;"/>
</div>
<div class="flex-content work">
<img src="https://via.placeholder.com/300" style="width: 100%;"/>
</div>
<div class="flex-content">
<img src="https://via.placeholder.com/300" style="width: 100%;"/>
</div>
<div class="flex-content">
<img src="https://via.placeholder.com/300" style="width: 100%;"/>
</div>
<div class="flex-content">
<img src="https://via.placeholder.com/300" style="width: 100%;"/>
</div>
</div>
</div>
<div class="col-2">
</div>
</div>
</body>
Also on jsfiddle

Here you go with a solution
filterSelection("all")
function filterSelection(c) {
var eles = document.getElementsByClassName("flex-content");
for(var i=0; i < eles.length; i++) {
if (c === "all" || eles[i].classList.contains(c)) {
eles[i].classList.remove("displayNone");
} else {
eles[i].classList.add("displayNone");
}
}
}
* {
box-sizing: border-box;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red; /* Just for Display purposes */
}
.row::after {
content: "";
clear: both;
display: table;
}
.button-container {
text-align: center;
}
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
}
.flex-content {
width: 20%;
padding: 5px;
}
.displayNone {
display: none;
}
<body>
<div class="row">
<div class="col-12">
<h1 style="text-align: center;">Image List</h1>
<div class="button-container">
<button class="btn" onclick="filterSelection('all')" >All</button>
<button class="btn" onclick="filterSelection('holiday')" >Holidays</button>
<button class="btn" onclick="filterSelection('work')" >Work</button>
</div>
</div>
</div>
<div class="row">
<div class="col-2"></div>
<div class="col-8">
<div class="flex-container">
<div class="flex-content">
<img src="https://via.placeholder.com/300" style="width: 100%;"/>
</div>
<div class="flex-content holiday">
<img src="https://via.placeholder.com/300" style="width: 100%;"/>
</div>
<div class="flex-content work">
<img src="https://via.placeholder.com/300" style="width: 100%;"/>
</div>
<div class="flex-content">
<img src="https://via.placeholder.com/300" style="width: 100%;"/>
</div>
<div class="flex-content">
<img src="https://via.placeholder.com/300" style="width: 100%;"/>
</div>
<div class="flex-content">
<img src="https://via.placeholder.com/300" style="width: 100%;"/>
</div>
</div>
</div>
<div class="col-2">
</div>
</div>
</body>
Add a onClick method filterSelection to buttons and pass values as argument.
Created a class displayNone for hiding the element.
Solution using jsfiddle

I want to add a circular ripple hover effect on image

I want to add a ripple effect animation when hovering over an image. I have a link which he uses ripple effect on button by using JavaScript which i have no idea how it work but i want to use the same method over an image on my code.
https://codepen.io/ViktorKorolyuk/pen/GYGwpv
Above Link shows the ripple effect on button and below is my code with blur effect with no animation at all.So I just want to add a ripple effect using the same method but on image
<html>
<div class="row">
<div class="column">
<div class="div-with-image-and-text">
<div class="row">
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div>
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div></div>
<div class="text"><a href="https://www.w3schools.com/w3images/wedding.jpg"style="text-
decoration:none"><h1 style="color:white;">Architecture</h1></a></div>
</div>
<div class="div-with-image-and-text">
<div class="row">
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div>
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div></div>
<div class="text"><a href="https://www.w3schools.com/w3images/wedding.jpg"style="text-
decoration:none"><h1 style="color:white;">Architecture</h1></a></div>
</div>
</div>
<!--Second container-->
<div class="column">
<div class="div-with-image-and-text">
<div class="row">
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div>
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div></div>
<div class="text"><a href="https://www.w3schools.com/w3images/wedding.jpg"style="text-
decoration:none"><h1 style="color:white;">Landscape</h1></a></div>
</div>
<div class="div-with-image-and-text">
<div class="row">
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div>
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div></div>
<div class="text"><a href="https://www.w3schools.com/w3images/wedding.jpg"style="text-
decoration:none"><h1 style="color:white;">Landscape</h1></a></div>
</div>
</html>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0 4px;
}
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 50%;
padding: 0 4px;
}
.column.half {
-ms-flex: 50%; /* IE10 */
flex: 50%;
max-width: 50%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
.div-with-image-and-text{
position: relative;
}
.div-with-image-and-text .text {
display:none;
}
.div-with-image-and-text:hover img{
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
}
.div-with-image-and-text:hover .text{
display: block;
position: absolute;
top: 50%;left: 50%;
transform:translate(-50%, -50%);
text-align:center;
font-family: 'Muli';
color:white;
font-size: 30px;
text-shadow:0 0 10px gray;
}

this way give you ripple effect without your effect that you give with hover
first make a html file and write this code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="mainRow">
<div class="display">
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Architecture</h1>
</a>
</div> -->
</a>
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Architecture</h1>
</a>
</div> -->
</a>
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Landscape</h1></a
>
</div> -->
</a>
<a class="HOVER FLASH">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Landscape</h1>
</a>
</div>
</a>
</div>
</div>
</body>
</html>
anf after that make a css file behind your html file and write this code in cssFile
index.css
/* #keyframes shake {
25% {
transform: rotate(calc(var(--angle) * -1));
}
50% {
transform: rotate(var(--angle));
}
100% {
transform: rotate(0deg);
}
} */
html {
font: 100 1.5em sans-serif;
}
body {
padding: 2em 5em 0em 5em;
}
h1 {
font-weight: 100;
}
.display {
display: grid;
grid-template-columns: 50% 50%;
grid-gap: 0.1em;
/* width: 50%; */
}
.HOVER {
--width: 100%;
--time: 0.7s;
position: relative;
display: inline-block;
/* height: 18em; */
/* padding: 1em; */
color: white;
background: #222;
overflow: hidden;
}
.HOVER:hover {
filter: blur(8px);
-webkit-filter: blur(8px);
}
.HOVER text {
position: relative;
z-index: 5;
transition: color var(--time);
}
.HOVER:hover text {
color: #222;
}
.HOVER span {
border-radius: 100%;
position: absolute;
display: block;
content: "";
z-index: 0;
width: 0;
height: 0;
background: #fff;
transform: translate(-50%, -50%);
transition: width var(--time), padding-top var(--time);
}
.HOVER:hover span {
width: calc(var(--width) * 2.25);
padding-top: calc(var(--width) * 2.25);
}
.HOVER.FLASH:hover text {
color: white;
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-family: "Muli";
color: white;
font-size: 30px;
text-shadow: 0 0 10px gray;
}
.HOVER.FLASH span {
background: #ff3b3b;
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
}
.animated {
--angle: 5deg;
animation: shake 0.3s;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.mainRow {
display: flex;
flex-wrap: wrap;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 5px;
}
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 50%;
padding: 0 4px;
}
.column.half {
-ms-flex: 50%; /* IE10 */
flex: 50%;
max-width: 50%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
.div-with-image-and-text {
position: relative;
}
.div-with-image-and-text .text {
display: none;
}
.div-with-image-and-text:hover img {
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
}
.div-with-image-and-text:hover .text {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-family: "Muli";
color: white;
font-size: 30px;
text-shadow: 0 0 10px gray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="mainRow">
<div class="display">
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Architecture</h1>
</a>
</div> -->
</a>
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Architecture</h1>
</a>
</div> -->
</a>
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Landscape</h1></a
>
</div> -->
</a>
<a class="HOVER FLASH">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Landscape</h1>
</a>
</div>
</a>
</div>
</div>
</body>
</html>
html {
font: 100 1.5em sans-serif;
}
body {
padding: 2em 5em 0em 5em;
}
h1 {
font-weight: 100;
}
.display {
display: grid;
grid-template-columns: 50% 50%;
grid-gap: 0.1em;
/* width: 50%; */
}
.HOVER {
--width: 100%;
--time: 0.7s;
position: relative;
display: inline-block;
/* height: 18em; */
/* padding: 1em; */
color: white;
background: #222;
overflow: hidden;
}
.HOVER text {
position: relative;
z-index: 5;
transition: color var(--time);
}
.HOVER:hover text {
color: #222;
}
.HOVER span {
border-radius: 100%;
position: absolute;
display: block;
content: "";
z-index: 0;
width: 0;
height: 0;
background: #fff;
transform: translate(-50%, -50%);
transition: width var(--time), padding-top var(--time);
}
.HOVER:hover span {
width: calc(var(--width) * 2.25);
padding-top: calc(var(--width) * 2.25);
}
.HOVER.FLASH:hover text {
color: white;
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-family: "Muli";
color: white;
font-size: 30px;
text-shadow: 0 0 10px gray;
}
.HOVER.FLASH span {
background: #ff3b3b;
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
}
.animated {
--angle: 5deg;
animation: shake 0.3s;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.mainRow {
display: flex;
flex-wrap: wrap;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 5px;
}
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 50%;
padding: 0 4px;
}
.column.half {
-ms-flex: 50%; /* IE10 */
flex: 50%;
max-width: 50%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
.div-with-image-and-text {
position: relative;
}
.div-with-image-and-text .text {
display: none;
}
.div-with-image-and-text:hover img {
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
}
.div-with-image-and-text:hover .text {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-family: "Muli";
color: white;
font-size: 30px;
text-shadow: 0 0 10px gray;
}

Simple CSS solution for the Ripple Effect:
A working example: https://next.plnkr.co/edit/i3HhQVIzlbq5QzGM?preview
HTML
<div class="ripple-effect-container">
<img src="https://www.w3schools.com/w3images/wedding.jpg">
</div>
CSS
.ripple-effect-container {
width: 200px;
height: 200px;
background-position: center;
transition: background 0.2s;
background-color: #063458;
}
.ripple-effect-container:hover {
background: #063458 radial-gradient(circle, transparent 1%, #063458 1%) center/15000%;
}
.ripple-effect-container:active {
background-color: #6eb9f7;
background-size: 100%;
transition: background 0s;
}
.ripple-effect-container img:hover {
opacity: 0.5;
}
.ripple-effect-container img {
object-fit: contain;
width: 100%;
height: 100%;
transition: 0.2s;
}

How can i move a small text on 2 lines, without using 1 div only

How can I make "This text" to be on 2 lines, and center it next to the circle, also put the arrow between first and second circle
https://i.stack.imgur.com/2wfVy.png
<div className="steps">
<div className="circle">
<div className="step-number">{number}</div>
</div>
<div className="step-text">This text</div>
<div>{ shouldRenderArrow && <Icon className="arrow" name="ArrowDownward" /> }</div>
</div>

Some change require in your div and some styling need then you got.
.steps{
display: flex;
}
.circle {
border: 1px solid red;
border-radius: 50px;
float: left;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
}
.step-text {
align-self: self-start;
justify-self: start;
flex-direction: column;
margin-left: 6px;
padding-top: 6px;
}
.arrow{
border: 1px solid;
width: 11px;
display: flex;
align-self: center;
justify-self: flex-end;
height:25px
}
.circle-arrow {
display: flex;
flex-direction: column;
}
<div class="steps">
<div class="circle-arrow">
<div class="circle">
<div class="step-number">1</div>
</div>
<Icon class="arrow" name="ArrowDownward" />
</div>
<div class="step-text">This text</div>
</div>
<div class="steps">
<div class="circle-arrow">
<div class="circle">
<div class="step-number">2</div>
</div>
<Icon class="arrow" name="ArrowDownward" />
</div>
<div class="step-text">This text</div>
</div>
<div class="steps">
<div class="circle-arrow">
<div class="circle">
<div class="step-number">3</div>
</div>
</div>
<div class="step-text">This text</div>
</div>

CSS - positioning a scroll div

HTML:
<div class="wrapper">
<div class="scrolls">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />aruturek
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />aruturek
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />aruturek
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />aruturek
</div>
</div>
CSS:
.wrapper {
background:#EFEFEF;
margin: auto;
;
text-align: center;
position: relative;
margin-bottom: 20px !important;
width: 540px;
padding-top: 5px;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 150px;
white-space:nowrap
}
.imageDiv img {
margin: 2px;
max-height: 100px;
cursor: pointer;
display: inline;
*display:inline;
*zoom:1;
vertical-align:top;
}
This is the result:
qshg7muq9vam.png http://jsfiddle.net/masgp4fg/
But I want to text "aruturek" was under the image, and is centered.
______________
| |
| |
| HEAD | and more...
| |
| |
______________
NICK
How I can position this?
Sorry for my english, I am from Poland! D:
Fiddle here: http://jsfiddle.net/masgp4fg/

Try this css:
.wrapper {
background:#EFEFEF;
margin: auto;
;
text-align: center;
position: relative;
margin-bottom: 20px !important;
width: 540px;
padding-top: 5px;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 150px;
white-space:nowrap
}
.scrolls div{
display: inline-block;
margin-right: 2em;
margin-left: 2em;
}
.imageDiv img {
margin: 2px;
max-height: 100px;
cursor: pointer;
display: inline;
*display:inline;
*zoom:1;
vertical-align:top;
}
And this html:
<div class="wrapper">
<div class="scrolls">
<div>
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br>aruturek
</div>
<div>
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br>aruturek
</div>
<div>
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br>aruturek
</div>
<div>
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br>aruturek
</div>
</div>
</div>
JSfiddle example here: http://jsfiddle.net/btz4sfsr/

You can update your html and css as per the below fiddle.
http://jsfiddle.net/kiranvarthi/v859mz30/
.scrolls .imagediv {
height: 150px;
float: left;
}

Your english is much better than my Polish
Just make a div for your images and the description.
<style>
.avatar {text-align:center;}
.avatarname {}
</style>
<div class="wrapper">
<div class="scrolls">
<div class="avatar">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />
<div class="avatarname">
aruturek
</div>
</div>
...

Put your image and name in a div floating left, and add a br between img and name :
HTML:
<div class="wrapper">
<div class="scrolls">
<div class="one-avatar">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br/>aruturek
</div>
<div class="one-avatar">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br/>aruturek
</div>
<div class="one-avatar">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br/>aruturek
</div>
<div class="one-avatar">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br/>aruturek
</div>
</div>
</div>
CSS (add this class):
.one-avatar {
float:left;
}
JSFIDDLE UPDATED : http://jsfiddle.net/ghorg12110/masgp4fg/3/

Is this what you want?
.wrapper {
background:#EFEFEF;
margin: auto;
;
text-align: center;
position: relative;
margin-bottom: 20px !important;
width: 540px;
padding-top: 5px;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 150px;
white-space:nowrap
}
.cont {
float: left;
padding: 10px;
}
<div class="wrapper">
<div class="scrolls">
<div class="cont">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />
<div class="lbl">aruturek</div>
</div>
<div class="cont">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />
<div class="lbl">aruturek</div>
</div>
<div class="cont">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />
<div class="lbl">aruturek</div>
</div>
<div class="cont">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />
<div class="lbl">aruturek</div>
</div>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

how to align icons inside the text box in react js? - javascript

Related

How to toggle the "parent" div when all "child" div are toggled (filtered as no result)?

Filtering HTML content?

I want to add a circular ripple hover effect on image

How can i move a small text on 2 lines, without using 1 div only

CSS - positioning a scroll div

Categories

Resources