How could to show left side of image at begin, and show right side on mouse hover.
body{
background:gray;
}
img{
width: 100px;
}
img:hover {
}
<img src="https://i.stack.imgur.com/AQdqr.png" >
I'm not sure if this is what you need, but you yourself can remake this code for your task.
body {
background: gray;
}
img {
width: 50px;
height: 50px;
object-fit: cover;
object-position: 0;
}
img:hover {
object-position: 100%;
}
<img src="https://i.stack.imgur.com/AQdqr.png">
I will sugest to add a container with two elements inside : your image and a div that will hide half of your image, and on hover we will remove div to show your img
.container{
position:relative;
width:150px;
height:150px;
border:2px solid black;
}
.container:hover .bg{
width:0%;
}
.bg{
transition:all .2s;
position:absolute;
right:0;
width:50%;
height:100%;
background:white;
}
img{
position:absolute;
height:100%;
object-fit: contain;
}
<div class="container">
<img src="https://i.stack.imgur.com/AQdqr.png"/>
<div class="bg"></div>
</div>
Youre not clear what you want. I think you want different color while hovering on the picture.
For this crop this picture to a single object. Then you can use css grayscale filter on hover.
body {
background: gray;
}
img {
width: 100px;
}
img:hover {
filter: grayscale(100%);
transition: 1s;
}
<img src="https://i.stack.imgur.com/AQdqr.png">
Related
I have a div-container, a bootstrap collapse element. In it there is another round element, which changes position, when using the collapse function. Means: It should be positioned on the top-border, but behind the bottom-border.
How would you solve this task?
My first idea was to use object-fit to cut off the bottom part of the round element, but that did not look well with transition and collapse. Second idea was to use a thick border-bottom as an after-pseudo-element to cover the bottom part, which did not work so far.
Do you have any ideas or have you done something like that?
Thank you!
Use clip-path:
.box {
border: 3px solid;
height: 200px;
margin: 50px;
position: relative;
clip-path: inset(-200% 0 0); /* a big negative value on the top to clip only left/right/bottom */
transition: 1s;
}
.box:hover {
height: 50px;
}
.box:before {
content: "";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 100px;
height: 100px;
border: 3px solid;
border-radius: 50%;
background: red;
}
<div class="box">
</div>
You may also use transform3D + background to hide portions of it:
div {
margin:0 1em;
padding:1px;
display:flex;
padding-bottom:2em;
background:white;
transform-style: preserve-3d;
}
div[class] {
border:solid;
border-bottom:none;
height:150px;
transition:0.25s;
}
div[class] + div {
border-top:solid;
}
div[class]:hover {
height:60px;
}
div span {
height:150px;
width:150px;
align-self:center;
background:red;
border-radius:50%;
margin-right:1em;
border:solid;
margin-left:auto;
margin-bottom:-2.2em;
transform:rotatex(-0.15deg) translatez(1px);;
}
<div>Whatever stands here</div>
<div class>
<p>hover to collapse</p>
<span></span>
</div>
<div>Whatever stands next</div>
HTML FILE:
<div class="one">
<div class="two">
<h2>ITEM NAME</h2>
</div>
</div>
CSS:
html, body {
height: 100%;
width: 100%;
}
.one{
display:block;
position: relative;
margin-left:auto;
margin-right:auto;
width:50%;
height:325px;
background-image: url('http://hd.wallpaperswide.com/thumbs/lion_5-t2.jpg');
background-size:cover;
}
.two{
position:absolute;
display:inline-block;
width:100%;
height:100%;
background-color: gray;
transition: all 0.3s ease-out;
}
.two h2{padding-top: 20%;}
I want to make a hover transition effect, just like this website:
Here
You can see in portfolio when you hover the link another light-blue div expands. I guess it's using transform: scale() I tried to do something like that, but the second div is overpassing the size of the parent div. How may I fix that? What am I doing wrong?
Also, I have my codepen sample.
The image of the lion you are using has a transparent background which appears along the edges, giving the impression that div one is actually smaller than it is. Set the background on the div one to a background colour instead of an image, and you will see what i mean.
i holp to help:
.one{
display:block;
position: relative;
margin-left:auto;
margin-right:auto;
width:510px;
height:330px;
background-image: url('http://hd.wallpaperswide.com/thumbs/lion_5-t2.jpg');
background-size:cover;
border:1px solid blue;
}
.two{
position:absolute;
display:block;
width:10%;
height:10%;
background-color: gray;
transition: all 0.3s ease-out;
margin-left:50%;
margin-top:30%;
opacity:0;
border-radius:100px;
}
.two h2{margin-top: 20%; margin-left:20%;}
.one:hover .two{
display:inline-block;
opacity: 1;
width:100%;
height:100%;
-webkit-transform: scale(1);
margin:0px !important;
border-radius:2px !important;
}
Sorry for my english.
I have a problem. I need to create a DIV inside another DIV, which has to have a white background. I tried using skew, but It didnt work well.
Here is an image:
There are at least several ways to achieve this, however the simplest way may be using linear-gradient background. Its quality is not really good compared with others but it's totally acceptable.
Try this:
div {
width:600px;
height:300px;
background:teal;
border:1px solid teal;
}
.top {
width:100%;
height:100px;
font-size:25px;
padding-left:30px;
background:linear-gradient(175deg, white 60%, transparent 62%);
border:none;
box-sizing:border-box;
}
HTML:
<div>
<div class='top'>Custom<br/>Home</div>
</div>
Demo.
You can do that with a pseudo element and transform rotate :
DEMO
HTML :
<div id="header">
Custom<br/>
Home
</div>
<div id="content"></div>
CSS :
#header{
background:#fff;
position:relative;
height:50px;
z-index:1;
font-size:30px;
padding-left:10%;
}
#header:before{
content:'';
position:absolute;
bottom:0;
right:0;
width:110%;
height:1000%;
background:inherit;
z-index:-1;
border-bottom:2px solid #636A6E;
-webkit-backface-visibility: hidden; /* to fix pixelisation in chrome */
-ms-transform-origin:100% 100%;
-webkit-transform-origin:100% 100%;
transform-origin:100% 100%;
-webkit-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}
#content{
min-height:500px;
background:#778385;
}
Since you need the border in your diagonal div, try this:
CSS:
.logo {
width:110%;
height:147px;
top:-10%;
left:-14px;
border:2px solid black;
position:absolute;
background:#fff;
transform:rotate(-7deg);
-ms-transform:rotate(-7deg);
/* IE 9 */
-webkit-transform:rotate(-7deg);
/* Opera, Chrome, and Safari */
}
.container {
width:100%;
height:612px;
overflow:hidden;
background:#7b8284;
position:relative;
}
.inner {
position:absolute;
height:200px;
transform:rotate(7deg);
-ms-transform:rotate(7deg);
/* IE 9 */
-webkit-transform:rotate(7deg);
/* Opera, Chrome, and Safari */
padding:20px 90px;
top:30%;
font-size:30px;
}
HTML:
<div class="container">
<div class="logo">
<div class="inner">My Logo</div>
</div>
</div>
Demo: http://jsfiddle.net/lotusgodkk/BKfe9/1/
You can modify the top,left,font-size,background-color,transform, border as per your need
If you want to do it in pure CSS I would recommend using the transform: rotate(xxx) feature of CSS3. I've created a JS-Fiddle that will help you get started (not the best solution...), it is not based on your fiddle: http://jsfiddle.net/syTu7/
I think I understand your question, I think my example will help
HTML
<div class="wrapper">
<div class="innter">some text</div>
</div>
CSS
.wrapper {
position: relative;
width: 960px;
margin: 0 auto;
background: #ddd;
min-height: 100%;
height: 800px;
}
.innter {
height: 500px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #ececec;
}
In HTML,
<div class="wrapper">
<div class="inner">some content</div>
</div>
In CSS,
.inner {
background: #fff;
}
I'm using the following CSS code to do a rollover effect with text:
.thumb {
position:relative;
}
.thumb img:hover {
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
}
.thumb:hover {
background:#f00;
}
.thumb span {
z-index:-10;
position:absolute;
top:10px;
left:10px;
}
.thumb:hover span {
z-index:10;
color:#fff;
}
HTML code:
<div class="thumb">
<img src="thumbnail.jpg" />
<span>Text</span>
</div>
Everything is working well except when I hover over the text: the rollover effect disappears and I can see the image again.
Any ideas?
Thanks in advance
I guess that is too much of styles for simple overlay effect, if you are interested to see a demo I've made from scratch than here you go
Demo
HTML
<div class="wrap">
<img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
<div class="overlay">Hello This Is So Simple</div>
</div>
CSS
.wrap {
position: relative;
display: inline-block;
}
.overlay {
opacity: 0;
background: rgba(0,0,0,.8);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: opacity 1s;
color: #fff;
text-align: center;
}
.wrap:hover .overlay {
opacity: 1;
}
When you click on image in facebook , a box pos-up but the rest entire background gets covered by blackish transparent layer. what effect is that ? can it be applied using css ?
you can use this plugin:
//www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
yes. That effect can be done using only css.
If you have any id or class applied to that element. Then do this -
#transparentLayer {
opacity:0.5; //for non-IE
color:#000;
filter: alpha(opacity=50); // for IE
}
Open FancyBox
<div class="fancybox">
<div class="content">
<div class="close">x</div>
</div>
</div>
and jQuery:
$(".fancybox").hide();
$("a").click( function() {
$(".fancybox").show();
});
$(".close").click( function() {
$(".fancybox").hide();
});
CSS:
.fancybox {
background-color:rgb(0,0,0);
background-color:rgba(0,0,0, 0.7);
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
.content {
width:600px;
background:#fff;
margin:0 auto;
height:100%;
position:relative;
}
.close {
position:absolute;
font-size:22px;
top:2px;
right:15px;
font-family:Arial;
}
.close:hover {
cursor:pointer;
}
http://jsfiddle.net/YnQbY/1/
It certainly can be applied using css:
here is the css for a black overlay:
.overlay{
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
the z-index indicates that the overlay is positioned above all other elements, the element (the image frame on Facebook) that should be on top of the overlay must have a z-index with value 1002 or more.
the -moz-opacity is the opacity for the overlay with firefox, the opacity for the overlay with chrome, safari,... and the filter is for an overlay with IE.
I have created a project with a similar issue, I created a div with class overlay that was initially hidden, and when clicked on a button the visibility was set to visible. The I've put an iFrame on top of the div overlay (with z-index 1002).
this was the css for my overlay:
.black_overlay{
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 15%;
left: 15%;
width: 70%;
height: 70%;
padding: 0px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 6px solid #E1143C;
background-color: rgba(228,208,150,1);
z-index:1002;
overflow: auto;
}
and following jQuery:
function showForm() {
$(".black_overlay").show(200);
$(".white_content").show(500);
}