I am building portfolio website using bootstraper and isotope js. I have container div. On desktop browser view container contains 3 divs in one line and all looking good, but when resolution changed and number of divs decreased(less than two per line) - in that case the divs are not centered.
<div id="container" class="clearfix isotope" style="position: relative; overflow: hidden; height: 680px;">
<div class="element item col-md-4 isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate(0px, 0px) scale(1, 1); opacity: 1;">
<div class="view view-first">
//content
</div>
</div>
<div class="element item col-md-4 isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate(320px, 0px) scale(1, 1); opacity: 1;">
<div class="view view-first">
//content
</div>
</div>
<div class="element item col-md-4 isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate(640px, 0px) scale(1, 1); opacity: 1;">
<div class="view view-first">
//content
</div>
</div>
<div class="element item col-md-4 isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate(0px, 340px) scale(1, 1); opacity: 1;">
<div class="view view-first">
//content
</div>
</div>
</div>
How do you fix that?
Actually your code is not working or well formed the way it is presented in your question. Is there a stray closing tag </div> in the second <div class="element item col-md-4 isotope-item" ?
I jsfiddled it here and style="position: absolute; left: 0px; top: 0px; will overlap every containers to top left.
If you look at that bootstrap example code, you will notice the specified the behavior of a container for dirrenent viewport size like so :
<div class="col-6 col-sm-6 col-lg-4">
I recommend you to read bootstrap grid-options so you get a better comprehension about how to use it.
Hope this helps
Related
I want to display the overlay for different links. 1st overlay has an image and text whereas if we click link2 it must display overlay2 having same structure but diff content. Please help me get the desired output.
function on() {
document.getElementById("overlay").style.display = "block";
}
function on1() {
document.getElementById("overlay1").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
.img {
transition: transform 5s ease-in-out;
transform: scale(1);
transform-origin: 0 0;
}
.img:hover {
transform: scale(1.25)
}
#overlay,
#overlay1 {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
z-index: 77777772;
cursor: pointer;
}
#text,
#text1 {
position: fixed;
top: 20%;
left: 5%;
//font-size: 50px;
color: black;
// transform: translate(-50%,-50%);
// -ms-transform: translate(-50%,-50%);
}
<div id="overlay" onclick="off()">
<div id="text">
<div style="width: 48%; float:left">
<h2>XXX</h2>
<h4>ZZZ</h4>
<p style="font-size:14px;">
Help bring forth the immense talent that resides amongst the valley’s citizens. </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
">
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/boydB3_6881-683x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="on()"></a>
</div>
<div id="overlay1" onclick="on1()">
<div id="text1">
<div style="width: 48%; float:left">
<h2>AAA</h2>
<h4>MMM</h4>
<p style="font-size:14px;">Help bring forth the immense talent that resides amongst the valley’s citizens. </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
">
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/002boydB37683-703x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="on1()"></a>
</div>
</div>
</div>
<a onclick="on(id)"style="font-size: 11pt;">Read More -></a>
<a onclick="on(id)"style="font-size: 11pt;">Read More -></a>
1. List item
There are better ways to achieve this, however as per your requirement you may pass different ids &actions as params to same function like so
function on() {
document.getElementById("overlay").style.display = "block";
}
function on1() {
document.getElementById("overlay1").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
function toggle(id, value) {
document.getElementById(id).style.display = value;
}
.img {
transition: transform 5s ease-in-out;
transform: scale(1);
transform-origin: 0 0;
}
.img:hover {
transform: scale(1.25)
}
#overlay,
#overlay1 {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
z-index: 77777772;
cursor: pointer;
}
#text,
#text1 {
position: fixed;
top: 20%;
left: 5%;
font-size: 50px;
color: black;
transform: translate(-50% -50%);
-ms-transform: translate(-50% -50%);
}
<div id="overlay" onclick="toggle('overlay', 'none')">
<div id="text">
<div style="width: 48%; float:left">
<h2>XXX</h2>
<h4>ZZZ</h4>
<p style="font-size:14px;">
Help bring forth the immense talent that resides amongst the valley’s citizens. </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
">
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/boydB3_6881-683x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="toggle('overlay', 'block')"></a>
</div>
<div id="overlay1" onclick="toggle('overlay1', 'block')">
<div id="text1">
<div style="width: 48%; float:left">
<h2>AAA</h2>
<h4>MMM</h4>
<p style="font-size:14px;">Help bring forth the immense talent that resides amongst the valley’s citizens. </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
">
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/002boydB37683-703x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="toggle('overlay1', 'block')"></a>
</div>
</div>
</div>
<a onclick="toggle('overlay', 'block')" style="font-size: 11pt;">Read More -></a>
<a onclick="toggle('overlay', 'block')" style="font-size: 11pt;">Read More -></a> 1. List item
Hi i'm doing a hover effect in my cards using Bootstrap and z-index but the problem the i have is when i pass the mouse in my cards the z-index works fine but my row lose his height, i tried to add a height to my row and it fixed but my row lose the responsive, when i looks in other resolution it looks with a big space, i need it works with a responsive for different resolution and i need to use position: absolute; because i dont want it just push the cards I need z-index to raise the cards not to push it. thank you for read me and i hope you can help me
here is my example
i try to add a height to my row but it lose the responsive
.row{
height:300px;
}
.row {
width: 100%;
}
.card {
transition: 1s;
}
.card:hover {
position: absolute !important;
top: 0px;
width: 130%;
z-index: 1;
transition(all .2s ease-out);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<div>
<div class="row bg-danger">
<div class="mt-2 col-lg-4 col-md-6 col-12">
<div class="card m-3" style="width: 18rem; height:20rem;">
<div class="card-body">
<h1 class="card-text">card 1</h1>
</div>
</div>
</div>
</div>
<div class="row bg-warning">
<div class="mt-2 col-lg-4 col-md-6 col-12">
<div class="card m-3 " style="width: 18rem; height:20rem;">
<div class="card-body">
<h1 class="card-text">Card 2</h1>
</div>
</div>
</div>
</div>
From what I understand you want to move your card up a bit, when it it is hovered. Just change the styles of your card on hover to this
.card:hover{
transform: translateY(-10px);
width: 130%;
z-index: 1;
transition(all .2s ease-out);
}
i have problem like this
dropdown-menu covered
btw it isn't covered by other div, but dropdown-menu can't be out of the navbar, if i can ilustrate this it can be like this
ilustration of the navbar and dropdown-men
i make the navbar native with this code
<div id="topnav" class="topnav close-sidebar">
<div class="col d-inline">
<a href="#" onclick="sidebarToggle()">
<i class="fa-solid fa-bars"></i>
</a>
<p class="mt-1" style="text-align: left; font: normal normal normal 14px/17px Helvetica; letter-spacing: 0.34px;"><%: DateTime.Now.ToString("dddd, dd MMMM yyyy") %></p>
</div>
<div class="form-inline mr-5" style="max-width: 350px;">
<div class="d-inline">
<img class="mb-3" src="<%=Page.ResolveClientUrl("~/Assets/img/Worklist/atom-button-header-a-button-header-icon.svg")%>" alt="Alternate Text" />
</div>
<div class="d-inline mb-3">
<img style="height: 24px;" class="" src="<%=Page.ResolveClientUrl("~/Assets/img/Worklist/atom-icon-a-icon-globe.svg")%>" alt="Alternate Text" />
</div>
<div class="d-inline mb-3">
<div id="en" class="">EN</div>
</div>
<div class="d-inline" style="max-width: 250px;">
<div id="profile" class="text-right mb-3 ml-4" style="max-width: 250px; width: 150px;">
<div class="dropdown">
<div style="cursor: pointer;" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="d-inline">
<img style="height: 32px; width: 32px;" src="<%= Page.ResolveClientUrl("~/Assets/img/Worklist/img_avatar.png") %>" class="img-fluid mr-2 rounded-circle" alt="Responsive image" />
</div>
<div class="d-inline">
Nama User
</div>
<div class="d-inline">
<img src="<%= Page.ResolveClientUrl("~/Assets/img/Worklist/atom-icon-a-icon-angle-down.svg") %>" alt="Text" />
</div>
</div>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="opacity: 1 !important; z-index: 99;">
<a class="dropdown-item" href="#">Logout</a>
</div>
</div>
</div>
</div>
</div>
</div>
and the css of is like this
.topnav {
top: 0;
overflow: hidden;
height: 56px;
background: #1D2567 0% 0% no-repeat padding-box;
opacity: 1;
display: flex;
}
.close-sidebar {
margin-left: 56px;
}
for the dropdown-menu i used boostrap 4.3.1
when i inspect the web, the css is like this
css inspect 1
css inspect 2
css inspect 3
css inspect 4
Update:
i try to see my z-index using 3d view in ms edge, and the dropdown-menu is already in front of the navbar, but on the website it is covered
3D View
set position relative to parent or container and set position absolute to child elements. try to change overflow
.topnav {
top: 0;
overflow: hidden; // try to change this not hidden
height: 56px;
background: #1D2567 0% 0% no-repeat padding-box;
opacity: 1;
display: flex;
position: relative; // parent}
.close-sidebar {
margin-left: 56px;
position: absolute; // child};
if dont work let us to know and type more describe. thank you
You can try
.topnav {
top: 0;
overflow: hidden;
height: 56px;
background: #1D2567 0% 0% no-repeat padding-box;
opacity: 1;
display: flex;
position: relative;
}
.close-sidebar {
margin-left: 56px;
position: absolute;
z-index: 10;
}
This should work. Let us know if this doesn't
Try using this
.topnav {
top: 0;
overflow: hidden;
height: 56px;
background: #1D2567 0% 0% no-repeat padding-box;
opacity: 1;
display: flex;
z-index: 999;
}
.close-sidebar {
margin-left: 56px;
}
I am trying to create a responsive diagonal layout (see attached image). Of course, this is a challenge at different screen sizes as the edges come out of alignment (example: see the last two rows on the image).
How can I vertically align the top edge of each slanted shape with the bottom edge of the one above it?
So far, the only way I've found to achieve this is by changing the left position of ::before pseudo element on the skewed shapes. But I would like to achieve this responsively as the size of the rows grow and the screen resizes.
.slant::before {
background-color: lightblue;
}
.lr .right-content,
.rr .left-content {
background-color: green;
}
.lr .slant,
.rr .slant {
position: relative;
}
.lr .slant::before,
.rr .slant::before {
content: '';
transform-origin: 100% 0%;
position: absolute;
top: 0;
bottom: 0;
}
.lr .slant::before {
transform: skewX(-10deg);
left: -100vw;
right: 0;
}
.rr .slant::before {
transform: skewx(10deg);
left: 0;
right: -100vw;
}
<div class="container">
<div class="row lr one">
<div class="col-xs-5 left-content slant">
<h1>Title</h1>
</div>
<div class="col-xs-7 right-content">
</div>
</div>
<div class="row rr card two">
<div class="col-xs-5 left-content">
</div>
<div class="col-xs-7 right-content slant">
<p>Lorem Ipsum is simply dummy...</p>
<p>Lorem Ipsum is simply dummy...</p>
<p>Lorem Ipsum is simply dummy...</p>
</div>
</div>
...
</div>
Here is an idea using clip-path:
.row {
position:relative;
background:lightblue;
height:50px;
margin:5px;
}
.row::before {
content:"";
position:absolute;
top:0;
bottom:0;
width:50%;
background:green;
}
.row.left::before {
left:0;
clip-path:polygon(0 0,100% 0, calc(100% - 30px) 100%,0 100%);
}
.row.right::before {
right:0;
clip-path:polygon(0 0,100% 0, 100% 100%,30px 100%);
}
.row.left.bottom::before,
.row.right.bottom::before{
transform:scaleY(-1);
}
<div class="row right bottom"></div>
<div class="row left" style="height:100px"></div>
<div class="row left bottom"></div>
<div class="row right" style="height:200px"></div>
<div class="row right bottom" style="height:100px"></div>
<div class="row left" style="height:100px"></div>
I have created the application where All divs are Flip Vertically on hover. I wanted to make it random without hover. How should I do that?
.vertical.flip-container {
position: relative;
float: left;
margin-left: 50px;
}
.vertical .back {
transform: rotateX(180deg);
}
.vertical.flip-container .flipper {
transform-origin: 100% 50px;
}
.vertical.flip-container:hover .flipper {
transform: rotateX(-180deg);
}
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper,
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 100px;
height: 100px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: red">
Rushikesh
</div>
<div class="back" style="background:green">
Jogle
</div>
</div>
</div>
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: red">
Rushikesh
</div>
<div class="back" style="background:green">
Jogle
</div>
</div>
</div>
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: red">
Rushikesh
</div>
<div class="back" style="background:green">
Jogle
</div>
</div>
</div>
Any suggestions would be thankful.
I simplified your markup and CSS quite a bit. Also gave it a more 3D look.
You can use setInterval to flip them hover:
http://jsfiddle.net/7x75466y/5/
var $flippers = $(".flip-container"),
qtFlippers = $flippers.length;
setInterval(function () {
$flippers.eq(Math.floor(Math.random()*qtFlippers)).toggleClass('hover');
}, 1000);
Here is a JSfiddle that selects a random tile, and applies an action to it at every second (using setTimeout). You can perform whatever action you like on the tile. Using jQuery
http://jsfiddle.net/7x75466y/2/
var containers = $(".flip-container")
setInterval(function() {
var target = containers.eq(Math.floor(Math.random() * containers.size()))
target.fadeToggle() //DO WHAT YOU WANT TO THE TARGET
}, 1000)