I am trying to make a webpage that allows the 2x2 of image blocks, when hovered over, to overshadow the other images that are in the body.
But for some reason I cannot get the image to escape its own div box.
html, body {
height: 100%;
width: 100%;
}
div {
width: 50%;
height: 50%;
float: left;
position: relative;
transition: width 2s, height 4s;
transition-delay: 2s;
}
div:hover {
width: 100%;
height: 100%}
div:nth-of-type(1) {
background: #ccc;
}
div:nth-of-type(2) {
background: #bbb;
border-left: 1px solid #f00;
}
div:nth-of-type(3) {
background: #aaa;
border-top: 1px solid #f00;
}
div:nth-of-type(4) {
background: #ddd;
border-top: 1px solid #f00;
border-left: 1px solid #f00;
}
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
Are you looking for an effect something like this:
body {
height: 200px;
width: 400px;
}
body {
border: 1px solid black;
}
div {
display: inline-block;
width: 49%;
height: 25%;
position: relative;
transition: width 2s, height 4s;
transition-delay: 2s;
}
div:hover {
z-index: 100;
width: 100%;
height: 100%;
}
div:nth-of-type(1) {
background: #eee;
}
div:nth-of-type(2) {
background: #bbb;
}
div:nth-of-type(3) {
background: #999;
}
div:nth-of-type(4) {
background: #666;
}
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
If I understood your problem correctly, you're looking into a hover option that'll cast a shadow layer on top of everything else?
If so, there's a simple trick to that, using the transform: scale(1) and the box-shadow command.
Personally I prefer to insert all images into separate DIVs and assign a class to them.
Try this:
https://codepen.io/meta704/pen/LYpREjK
Related
Is there a way to make a transition happen for a box-shadow on page load instead of with a hover or click effect?
The transition I want on page load, or as an event:
.item:hover{
margin:0 auto;
box-shadow: 1px 1px 20px grey;
transition: 0.7s;
max-width: 940px;
color: dimgrey;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 10px 10px 10px 10px;
}
you can name keyframes a name and provide the time you need, I have provided4sec in the example.
It says change the background color from red to yellow and increase the height by 200px and animate this for 4 seconds.
.item {
height: 100px;
width: 100px;
background-color: blue;
animation-name: animate;
animation-duration: 4s;
border-radius: 10px;
}
#keyframes animate {
from {
background-color: red;
}
to {
background-color: yellow;
height: 200px;
}
}
<div class="item">
</div>
I'm working on getting better with CSS animations and transitions. What I'm trying to do is make the transition from a square to a circle and vice versa smoother. I know that I need to use the transition method in CSS to control this.
2 questions:
Why is the transition method not working in the below code snippet?
How do I go about making different transition properties for each changing value? i.e. 1 transition timing for changing the border radius, 1 transition timing for moving the circle to where the square is, etc.
.container-flex {
display: flex;
width: 500px;
height: 250px;
border: 1px solid black;
background-color: rgb(0,0,255);
}
.circle {
width: 200px;
height: 200px;
background-color: rgba(255,0,0,0.5);
border-radius: 100px;
transition: all 1s alternate;
}
.circle:hover {
border-radius: 0;
}
.square {
width: 200px;
height: 200px;
background-color: rgba(0,255,0,0.5);
transition: all 1s alternate;
}
.square:hover {
border-radius: 100px;
}
<html>
<body>
<div class="container-flex">
<div class="circle"></div>
<div class="square"></div>
</div>
</body>
</html>
.container-flex {
display: flex;
width: 500px;
height: 250px;
border: 1px solid black;
background-color: rgb(0,0,255);
}
.circle {
width: 200px;
height: 200px;
background-color: rgba(255,0,0,0.5);
border-radius: 100px;
transition: all 1s ease;
}
.circle:hover {
border-radius: 0;
}
.square {
width: 200px;
height: 200px;
background-color: rgba(0,255,0,0.5);
transition: all 1s ease;
}
.square:hover {
border-radius: 100px;
}
<html>
<body>
<div class="container-flex">
<div class="circle"></div>
<div class="square"></div>
</div>
</body>
</html>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I'm trying to make a sidebar smooth transition when click so the content wrapper also makes a transiction to the left.
I simply cant do it.
var rightSidebarOpen = false;
$('#toggle-right-sidebar').click(function () {
if(rightSidebarOpen) {
$('#sidebar-right').hide()
$('.content-wrapper').css('margin-right', "0");
}
else {
$('#sidebar-right').show();
$('.content-wrapper').css('margin-right', "205px");
}
rightSidebarOpen = !rightSidebarOpen;
});
.content-wrapper {
background: #fff;
margin-left: 205px;
min-height: 100vh;
padding: 1rem 1.5rem;
transition: all .7s ease;
margin-bottom: 50px;
background: green;
}
#sidebar-right {
background: #fafafa;
border-right: 2px solid #e5e5e5;
width: 200px;
height: 100%;
position: absolute;
top: 0;
right: 0;
overflow-x: hidden;
transition: left 1s ease;
display: none;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle-right-sidebar">BUTTON</button>
<div class="content-wrapper"></div>
<div id="sidebar-right"></div>
Maybe something you looking for:
I set position: relative to #sidebar-right and just use right with the same pixel to make this move with .content-wrapper
var rightSidebarOpen = false;
$('#toggle-right-sidebar').click(function () {
if(rightSidebarOpen) {
$('#sidebar-right').css('right', "-205px");
$('.content-wrapper').css('margin-right', "0");
}
else {
$('#sidebar-right').css('right', "0");
$('.content-wrapper').css('margin-right', "205px");
}
rightSidebarOpen = !rightSidebarOpen;
});
.content-wrapper {
background: #fff;
margin-left: 205px;
min-height: 100vh;
padding: 1rem 1.5rem;
transition: all .7s ease;
margin-bottom: 50px;
background: green;
position: relative;
}
#sidebar-right {
background: #fafafa;
border-right: 2px solid #e5e5e5;
width: 200px;
height: 100%;
position: absolute;
top: 0;
right: 0;
overflow-x: hidden;
transition: all .7s ease;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle-right-sidebar">BUTTON</button>
<div class="content-wrapper"></div>
<div id="sidebar-right"></div>
If I were you, I'd just do the transition of the right property:
var rightSidebarOpen;
$('#toggle-right-sidebar').click(function () {
if (rightSidebarOpen) {
//$('#sidebar-right').hide();
$('#sidebar-right').css('right', "-200px");
$('.content-wrapper').css('margin-right', "0");
}
else {
//$('#sidebar-right').show();
$('#sidebar-right').css('right', "0");
$('.content-wrapper').css('margin-right', "205px");
}
rightSidebarOpen = !rightSidebarOpen;
});
/* added */
* {box-sizing: border-box}
body {margin: 0; overflow: hidden}
.content-wrapper {
background: #fff;
margin-left: 205px;
min-height: 100vh;
padding: 1rem 1.5rem;
transition: margin-right 1s; /* modified */
margin-bottom: 50px;
background: green;
}
#sidebar-right {
background: #fafafa;
border-right: 2px solid #e5e5e5;
width: 200px;
height: 100%;
position: absolute;
top: 0;
right: -200px; /* modified */
overflow-x: hidden;
transition: right 1s; /* modified */
/*display: none; better to put it off screen with the "right" property*/
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle-right-sidebar">BUTTON</button>
<div class="content-wrapper"></div>
<div id="sidebar-right"></div>
show(), hide() functions only work as display:block; and display:none; and hence you cant animate them.
HTML
<button id="toggle-right-sidebar">BUTTON</button>
<div class="content-wrapper"></div>
<div id="sidebar-right"></div>
CSS
.content-wrapper {
background: #fff;
margin-left: 205px;
min-height: 100vh;
padding: 1rem 1.5rem;
transition: all .7s ease;
margin-bottom: 50px;
background: green;
}
#sidebar-right {
background: #fafafa;
border-right: 2px solid #e5e5e5;
width: 200px;
height: 100%;
position: absolute;
top: 0;
right: 0;
overflow-x: hidden;
transition: all 1s ease;
transform: translateX(200px);
background: blue;
}
JS
var rightSidebarOpen = false;
$('#toggle-right-sidebar').click(function () {
if(rightSidebarOpen) {
$('#sidebar-right').css('transform', 'translateX(200px)')
$('.content-wrapper').css('margin-right', "0");
}
else {
$('#sidebar-right').css('transform', 'translateX(0)');
$('.content-wrapper').css('margin-right', "205px");
}
rightSidebarOpen = !rightSidebarOpen;
});
You can try out this pen
I have a div with a class called 'ball', each edge of the div has a border (border-top, border-left etc) I want to trigger different events with JavaScript when the user clicks on a border on each border.
ex: user clicks on border-top
console.log('top')
and so on
HMTL:
.ball {
border-radius: 50%;
width: 400px;
height: 400px;
margin: auto;
background-color: red;
border-top: 20px solid green;
border-left: 20px solid blue;
border-bottom: 20px solid orange;
border-right: 20px solid purple;
}
<div class="ball"></div>
I know I can trigger events when the user clicks on the div itself, but I would like to, somehow, select these borders with Javascript.
You can simulate this by adding extra elements.
Here is an exmaple (I used jQuery for simplicty but you can easily change to JS)
$('span').click(function(){
console.log($(this).data('value'));
})
.ball {
border-radius: 50%;
width: 200px;
height: 200px;
margin: auto;
background-color: blue;
position: relative;
font-size:0;
}
span:first-child {
position: absolute;
z-index: 3;
border-radius: 50%;
background: red;
top:20px;
left:20px;
bottom: 20px;
right: 20px;
}
span:nth-child(n+2) {
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
border-radius: 50%;
background: green;
bottom: 0;
right: 0;
-webkit-clip-path: polygon(50% 50%, 0% 100%, 100% 100%);
clip-path: polygon(50% 50%, 0% 100%, 100% 100%);
}
span:nth-child(3) {
transform:rotate(90deg);
background: purple;
}
span:nth-child(4) {
transform:rotate(180deg);
background: blue;
}
span:nth-child(5) {
transform:rotate(-90deg);
background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ball">
<span data-value="center"></span>
<span data-value="bottom"></span>
<span data-value="left"></span>
<span data-value="top"></span>
<span data-value="right"></span>
</div>
Im wondering if anybody know if at all possible, how to create a trapezium using CSS/Html/Canvas.
I've tried to sort of hash one together only its very messy and would be unusable in the real world.
div {
width:0;
margin-left:-1000px;
height:100px;
border-right:1000px solid lightblue;
border-top:60px solid transparent;
border-bottom:60px solid transparent;
padding-left:1000px;
white-space:no-wrap;
}
Heres my jsFiddle...
http://jsfiddle.net/Liamatvenn/WWYYM/
I can do it with 2 extra divs as wrappers.
CSS
.trapezium {
position: absolute;
left: 40px;
top: 40px;
width: 300px;
height: 200px;
-webkit-transform: skewY(6deg);
overflow: hidden;
}
.trapezium > div {
background-color: yellow;
position: absolute;
left: 0px;
top: 50px;
width: 300px;
height: 200px;
-webkit-transform: skewY(-12deg);
overflow: hidden;
}
.trapezium > div > div {
font-size: 60px;
background-color: yellow;
position: absolute;
left: 0px;
top: -30px;
width: 300px;
height: 200px;
-webkit-transform: skewY(6deg);
overflow: hidden;
}
demo
Are you speaking for something like this please ? Check this fiddle: jsfiddle.net/WWYYM/3/ . Let me know if it works for you. I have edited your code like the following:
div {
border-bottom: 100px solid lightblue;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 500px;
white-space:no-wrap;
text-align:center;
}
i don`t know what you want. so i guess this will help you little.
div {
width:0;
margin-left:-100px;
height:100px;
border-right:100px solid lightblue;
border-top:60px solid transparent;
border-bottom:60px solid transparent;
padding-left:100px;
white-space:no-wrap;
}
you can addition transform alike below:
div {
width:0;
margin-left:-50px;
margin-top: -500px;
height:100px;
border-right:100px solid lightblue;
border-top:60px solid transparent;
border-bottom:60px solid transparent;
padding-left:1000px;
white-space:no-wrap;
transform:rotate(20deg);
-ms-transform:rotate(20deg); /* IE 9 */
-webkit-transform:rotate(90deg);
}