I have a grid view that looks like the following:
jQuery(window).resize(function(evt) {
jQuery(".grid-content > div > div > .channelImage").height(jQuery(".grid-content > div > div > .channelImage").width());
});
jQuery(function() {
jQuery(window).resize();
});
body {
background-color: rgba(48, 48, 48, 1);
}
body>.container {
max-width: 90vw;
}
.previewrow {
height: 40vh;
}
.preview {
position: absolute;
left: 0;
right: 0;
height: 40vh;
}
.grid-content>div>div {
margin: 3vw;
box-shadow: 6px 6px 6px black;
border: 1px solid white;
text-align: center;
color: white;
}
.grid-content>div {
float: left;
}
.grid-content>div>div>.channelImage {}
.grid-content>div>div>.channelImage:before {
content: " ";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.grid-content>div:hover>div {
box-shadow: 0 0 0 black;
transition: all 0.25s;
margin: 1em;
}
<!-- Bootstrap and JavaScript -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap-grid.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="container body-content">
<div class="grid-content">
<!-- One -->
<div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
<div>
<div class="channelImage">
<img width="30%" />
</div>
<div>
Some text
</div>
</div>
</div>
<!-- Two -->
<div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
<div>
<div class="channelImage">
<img width="30%" />
</div>
<div>
Some text
</div>
</div>
</div>
<!-- Three -->
<div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
<div>
<div class="channelImage">
<img width="30%" />
</div>
<div>
some text
</div>
</div>
</div>
<!-- Four -->
<div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
<div>
<div class="channelImage">
<img width="30%" />
</div>
<div>
Some text
</div>
</div>
</div>
<!-- Five -->
<div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
<div>
<div class="channelImage">
<img width="30%" />
</div>
<div>
Some text
</div>
</div>
</div>
</div>
</div>
</body>
As you can see I am trying to enlarge the squares whenever the user hovers over the square. But adjusting the margins results in other boxes being moved. How can I enlarge the squares so they do not move other boxes?
You can make something bigger without moving anything around it by using the following CSS and applying it to the element you want to effect:
.class {
transition: .10s, transform .10s ease;
-moz-transition: .10s, transform .10s ease;
-webkit-transition: .10s, transform .10s ease;
}
.class:hover {
-ms-transform: scale(1.01); /* IE 9 */
-webkit-transform: scale(1.01); /* Safari */
transform: scale(1.01);
}
As a bonus, you can make it shrink back down when you click it to make a spring-like effect:
.class:active {
-ms-transform: scale(0.99); /* IE 9 */
-webkit-transform: scale(0.99); /* Safari */
transform: scale(0.99);
}
I'm just thinking about this but I'm not using Bootstrap though.
Can't you just use another image/element, get the x and y co-ords of the underlying element and place on top. The element on top displays the contents of the element below but is larger in size. You could make the width of the element below wider too. So that the elements to the right move over. The elements beneath will not move.
I've just done this quickly and it works quite well. The only problem I have is getting the x, y co-ords on scrolling.
I will post the code once I have finished.
Thanks.
Related
Im basically building a mobile menu for my website and it doesnt appear only Iphones. I checked with Safari and Chrome in Iphone, both not working. Works with other mobile phones. I use bootstrap
My html is below:
<!-- MOBİL MENÜ ALT BAR BAŞLANGIÇ -->
<header class="header">
<div class="container">
<nav class="bottom-nav">
<div class="bottom-nav-item active" style="width:0;">
<div class="bottom-nav-link">
<span id="hamburger" style="font-size:30px; cursor:pointer" onclick="openNav()">☰</span>
<span id="kapatici" style="font-size:30px; cursor:pointer" onclick="closeNav()">×</span>
</div>
</div>
<div class="bottom-nav-item">
<div class="bottom-nav-link">
<img id="up" src="assets/img/mobilmenuikonlari/hesabim.png">
<a>Hesabım</a>
</div>
</div>
<div class="bottom-nav-item">
<div class="bottom-nav-link">
<img id="up" src="assets/img/mobilmenuikonlari/kurallar.png">
<a>Kurallar</a>
</div>
</div>
<div class="bottom-nav-item">
<div class="bottom-nav-link">
<img id="up" src="assets/img/mobilmenuikonlari/oranlar.png">
<a>Oranlar</a>
</div>
</div>
<div class="bottom-nav-item">
<div class="bottom-nav-link">
<img id="up" src="assets/img/mobilmenuikonlari/destek.png">
<a>Destek</a>
</div>
</div>
</nav>
</div>
</header>
I added my html code aswell I dont know why its not appearing on Iphone but
My css is below:
.header .bottom-nav {
display:none;
}
#media screen and (max-width: 768px){
.header .bottom-nav {
display: -webkit-box;
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 0.8rem 0;
background-color: #0a0a0a;
z-index: 99;
will-change: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 -2px 3px -2px #212121;
}}
I have this code:
.top-row,
.bottom-row {
background: red;
padding: 10px;
display: flex;
}
.box1,
.box2,
.box3,
.box4 {
background: green;
padding: 10px;
flex: 1;
}
.header {
background: tan;
padding: 10px;
}
.column1 {
background: pink;
padding: 10px;
}
.column2 {
background: yellow;
padding: 10px;
}
<div class="top-row">
<div class="box1">
<div class="header">
<!-- this field should be left -->
<form>
<input type="text">
</form>
<!-- this button should be left -->
<button class="add">+</button>
<!-- this button should be right -->
<button class="edit">edit</button>
</div>
<div class="column1">
left column
</div>
<div class="column2">
right column
</div>
</div>
<div class="box2">
<div class="header">
<!-- this button should be left -->
<button class="add">+</button>
<!-- these buttons should be centered -->
<button class="edit">btn1</button>
<button class="edit">btn2</button>
<button class="edit">btn3</button>
<!-- this field should be right -->
<form>
<input type="text">
</form>
</div>
<div class="column1">
left column
</div>
<div class="column2">
right column
</div>
</div>
</div>
<div class="bottom-row">
<div class="box3">
<div class="header">
header
</div>
<div class="column1">
left column
</div>
<div class="column2">
right column
</div>
</div>
<div class="box4">
<div class="header">
header
</div>
<div class="column1">
left column
</div>
<div class="column2">
right column
</div>
</div>
</div>
I have made this codepen:
https://codepen.io/demiurgen/pen/zzygRb
I need help to get the left and right columns to be left and right columns.
They should take up 50% of the space inside their box. Each box is supposed to be a two column layout with a header spanning the top.
Also, how do I position elements like form fields and buttons whit in a flexbox?
Do I need to make another flexbox child for every element I want to position?
You can have nested flex-containers to achieve desired layout. You can use flex: 0 0 50% to make element 50% width and don't allow element to grow and shrink. Note that flex is shorthand for setting flex-grow, flow-shrink and flex-basis.
Also this can be achieved via setting flex: 1 0 0. This is forcing element to grow but don't grow based on content (default value is: flex: 0 1 auto, where auto means take width based on content).
Demo:
* {
box-sizing: border-box; /* new */
}
.top-row,
.bottom-row {
background: red;
padding: 10px;
display: flex;
}
.box1,
.box2,
.box3,
.box4 {
background: green;
padding: 10px;
flex: 1;
display: flex; /* new */
flex-wrap: wrap; /* new */
}
.header {
background: tan;
padding: 10px;
flex: 0 0 100%; /* new */
}
.column1 {
background: pink;
padding: 10px;
flex: 0 0 50%; /* new */
}
.column2 {
background: yellow;
padding: 10px;
flex: 0 0 50%; /* new */
}
/* new */
.header {
display: flex;
flex-wrap: wrap;
}
/* new */
.header form {
width: 100%;
}
/* new */
.header form input[type="text"] {
width: 100%;
}
/* new */
.header .add {
margin-right: auto;
}
<div class="top-row">
<div class="box1">
<div class="header">
<!-- this field should be left -->
<form>
<input type="text">
</form>
<!-- this button should be left -->
<button class="add">+</button>
<!-- this button should be right -->
<button class="edit">edit</button>
</div>
<div class="column1">
left column
</div>
<div class="column2">
right column
</div>
</div>
<div class="box2">
<div class="header">
<!-- this button should be left -->
<button class="add">+</button>
<!-- these buttons should be centered -->
<button class="edit">btn1</button>
<button class="edit">btn2</button>
<button class="edit">btn3</button>
<!-- this field should be right -->
<form>
<input type="text">
</form>
</div>
<div class="column1">
left column
</div>
<div class="column2">
right column
</div>
</div>
</div>
<div class="bottom-row">
<div class="box3">
<div class="header">
header
</div>
<div class="column1">
left column
</div>
<div class="column2">
right column
</div>
</div>
<div class="box4">
<div class="header">
header
</div>
<div class="column1">
left column
</div>
<div class="column2">
right column
</div>
</div>
</div>
I think you will need to use a column container for flex to work correctly.
Like this: https://codepen.io/anon/pen/OgdLLO
.col-container {
display: flex;
}
I'm trying to affect two elements, the event-thumbnail img:hover will effect also .event-date .
when I'm trying to do something like .event-date+.event-date
its effect only on the .event-date.
.event-list .event-thumbnail img{
display: block;
transition: 0.8s;
}
.event-list .event-thumbnail img:hover +.event-date {
transform: scale(1.1,1.1);
}
.event-thumbnail .event-date{
position: absolute;
left: 0;
top: 0;
background:#07A2DD;
color:#FFF;
width: 60px;
text-align: center;
padding: 10px 0;
line-height: 1;
font-weight: 600;
}
<div id="latest-events">
<h1>events</h1>
<div class="event-list clearfix">
<figure class="event-thumbnail">
<a href="http://sd.esy.es/event2/">
<img src="http://sd.esy.es/wp-content/uploads/2016/10/1-135x100.png" alt="2">
<div class="event-date">
<span class="event-date-day">10</span>
<span class="event-date-month">oc</span>
</div>
</a>
</figure>
<div class="event-detail">
<h4 class="event-title">
2
</h4>
<div class="event-excerpt">
text
</div>
</div>
</div>
<div class="event-list clearfix">
<figure class="event-thumbnail">
<a href="http://sd.esy.es/event3/">
<img src="http://sd.esy.es/wp-content/uploads/2016/10/1-135x100.png" alt=" 3">
<div class="event-date">
<span class="event-date-day">10</span>
<span class="event-date-month">oc</span>
</div>
</a>
</figure>
<div class="event-detail">
<h4 class="event-title">
3
</h4>
<div class="event-excerpt">
text text text text text text text text text text text text text text text text
</div>
</div>
</div>
<div class="event-list clearfix">
<figure class="event-thumbnail">
<a href="http://sd.esy.es/event1/">
<img src="http://sd.esy.es/wp-content/uploads/2016/10/1-135x100.png" alt=" 1">
<div class="event-date">
<span class="event-date-day">10</span>
<span class="event-date-month">feb</span>
</div>
</a>
</figure>
<div class="event-detail">
<h4 class="event-title">
1
</h4>
<div class="event-excerpt">
some text </div>
</div>
</div>
</div>
Try this :
.event-thumbnail img,
.event-thumbnail img + .event-date {
transition: 0.8s;
}
.event-thumbnail img:hover,
.event-thumbnail img:hover + .event-date {
transform: scale(1.1, 1.1);
}
The same properties can be applied to multiple selectors at once by separating the selectors with a comma, as in the following:
selectorA,
selectorB,
selectorC {
property: value;
property: value;
property: value;
}
It should work fine, see my example.
div:hover + p {
background: #000;
color: #fff;
...
}
Maybe the transform: scale(1.1,1.1); doesn't work? Try to set primitive styles to make sure your selector works right. For example background: red;.
I want to Display Three Image in a Single Div as shown below, and on hover on particular image the image has to enlarge.
please help me.
HTML:
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="img1.jpg" alt="thumb01" class="style">
<div class="col-sm-6 col-md-6">
<img src="img2.jpg" alt="thumb01" class="ch">
</div>
<div class="col-sm-6 col-md-6">
<img src="img3.jpg" alt="thumb01" class="ch">
</div>
</div>
</div>
</div>
CSS:
.ch {
width: 100px;
position: relative;
opacity: 1;
transition: 0.3s ease;
cursor: pointer;
}
.ch:hover {
transform: scale(1.5, 1.5);
opacity: 2;
}
This is probably a pretty basic question, but I have a banner with an image on the left and text on the right. Under the banner is just a block of color. When the page gets smaller, my expectation is that the bits in the banner would stack (maintaining the background color for both) and the block of color (class="blue-line") would fall beneath them.
Here is the mark-up:
<section>
<div class="row header">
<div class="col-sm-6">
<img src="../images/logo.png" height="100px" />
</div>
<div class="col-sm-6 title">
<h2>Some Title Text</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 blue-line"></div>
</div>
</section>
and the css
.header {
background-color: #F2EBCC;
border: 10px solid #F2EBCC;
height: 120px;
}
.row > .title {
text-align: right;
top: 45%;
}
Thanks in advance!
JSFiddle: http://jsfiddle.net/3n6Kd/
try this:
<section>
<div class="row header">
<div class="col-sm-6">
<img src="../images/logo.png" height="100px" />
</div>
<div class="col-sm-6 title">
<h2>Some Title Text</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 blue-line"></div>
</div>
and:
.header {
background-color: #F2EBCC;
height: 120px;
}
.title {
text-align: right;
display: block;
padding: 10px;
}
.blue-line {
margin-top:10px;
height: 15px;
background-color: blue;
}
the text go under the first column not the blue-line, but it seems to appear above the blue-line so try it in your computer because some time jsfiddle.net don't show code correctly.
hope it will help you.