How to fit an image inside a div and this div is rotated at 45deg?
Add scale value in transform style for img like this:
.profile-photo { width: 210px; height: 210px; position: relative; left: 43px; top: 50px; border: 8px solid #000; border-radius: 60px; transform: rotate(45deg); overflow: hidden; z-index: 2; background: #34983e;padding:0 }
.profile-photo img {
width: 100%;
transform: rotate(-45deg) scale(1.21)
}
<div class="profile-photo">
<img alt="Profile photo" src="http://www.michiganurology.com/wp-content/uploads/2015/10/reddy.jpg" onerror="this.onerror=null;this.src='https://via.placeholder.com/500/E5E8EC/4B89DA?text=error+image';">
</div>
use below code.
HTML
<div class="div">
<img src="index.png">
</div>
CSS
.div
{
width: 500px;
background: lightblue;
transform: rotate(40deg);
}
W3schools transforms
Related
I want to do synchronising device, it measures phase shift between phases. It's a measurement device, that have a pointer like a clock.
It consists of two images, a frame and arrow, that rotates. but when i try to resize window i have the following:
My html:
<div>
<div>
<div className={classes.sync_point}> . </div>
<img src={arpng} ref={point} alt="arrow" className={classes.arrow} />
<img src={syncFrame} alt="syncframe" className={classes.syncFrame} />
</div>
<div className={classes.btn}>
<Button variant='contained' onClick={calculateResult}>SYNCHRONISE</Button>
</div>
<div>
<h1>{word}</h1>
</div>
</div>
My css:
.syncFrame{
margin-top: 40px;
width: 50%;
height: 50%;
position: absolute;
left: 20vh;
z-index: 1;
}
.arrow{
margin-top: 40px;
width: 50%;
height: 50%;
position: relative;
z-index: 2;
}
How can i bound that images so that when i resize the window or change my device it proportionaly resizes.
<div className="parent">
<div className={classes.sync_point}>
.
</div>
<img src={arpng} ref={point} alt="arrow" className={classes.arrow} />
<img src={syncFrame} alt="syncframe" className={classes.syncFrame} />
</div>
.parent{
height: ....;
width: ....;
border: 1px solid black;
position: relative;
}
img, .sync_point {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-height: 100%;
}
You can use a container width position:relative and set the second image with position:absolute. You can set the pointer as you need with top:0, left:50%, bottom:0 and margin:auto
.container{
background-color:blue;
width: 50%;
position: relative;
}
.clock{
width:100%;
}
.pointer{
position:absolute;
top: 0;
left: 50%;
bottom: 0;
margin: auto;
width: 40%;
transform: rotate(-180deg);
transition-duration: 1s;
transform-origin: left;
}
.container:hover .pointer{
transform: rotate(-45deg);
}
<div class="container">
<img class="clock" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/500px-Circle_-_black_simple.svg.png" alt="">
<img class="pointer" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/U%2B2192.svg/250px-U%2B2192.svg.png" alt="">
</div>
I've made a responsive image grid and am trying to add a hover effect to it so that the image gets a dark overlay and some text fades in on it. However, I've been having a tough time implementing it.
Here's my HTML structure.
<div class="tile">
<img src="some_image" class="animate">
<div class="overlay">
<p>Mahatma Gandhi</p>
</div>
And here's my CSS
.gallery .row .tile:hover ~ .tile img {
transform: scale(1.2);
}
However upon hovering over the image, it does not have the expected behaviour.
What's wrong?
EDIT
I got the hover effect to work and I can now fade in text.
Here's my code for that:
<div class="tile">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Tagore_Gandhi.jpg/220px-Tagore_Gandhi.jpg" class="animate">
<div class="overlay">
<div class="text">Mahatma Gandhi</div>
</div>
</div>
CSS
.tile {
position: relative;
width: 100%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0, 0, 0, 0.8);
}
.tile:hover .overlay {
opacity: 1;
}
This seems to work but I think it doesnt have a certain "feel" to it. So I need to add a scale effect to the image. How can I do that
Here is a jsFiddle that i think will help you to resolve your issue: https://jsfiddle.net/mcs3yn1x/
HTML
<div class="tile">
<img src="https://picsum.photos/200/300" class="animate">
<div class="overlay">
<p>Mahatma Gandhi</p>
</div>
CSS
.tile {
border: 2px solid black;
}
.tile:hover img {
transform: scale(1.2);
}
Edit
After hearing alittle more about your issue I have created the following jsFiddle: https://jsfiddle.net/f1gzonjr/4/
HTML
<div class="tile">
<div class="container">
<img src="https://picsum.photos/200/300" class="animate">
<div class="overlay">
<p>Mahatma Gandhi</p>
</div>
</div>
CSS
.tile {
position: relative;
top: 0px;
left: 0px;
height: 300px;
width: 200px;
overflow: hidden;
border: 2px solid black;
}
.container:hover img{
transform: scale(1.2);
}
.overlay{
position: absolute;
display: none;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.5);
}
.overlay p {
position: relative;
text-align: center;
color: #fff;
}
.tile:hover .overlay{
display: block;
}
Here is an alternate solution. Not sure if its what you wanted.
.tile:hover img, .tile.hover img {transform: scale(1.2);}
Here is the original answer that I adapted: Change background color of child div on hover of parent div?
-----EDIT-----
To stop it scaling and breaking responsiveness you will need to add a container around the image and then set overflow to none.
HTML:
<div class="tile">
<div class="img-container"><img src="https://ichef.bbci.co.uk/news/660/cpsprodpb/16C0E/production/_109089139_928b0174-4b3f-48ff-8366-d118afa1ed56.jpg" class="animate"></div>
<div class="overlay">
<p>Mahatma Gandhi</p>
CSS:
.img-container{
width: 500px;
height: 500px;
overflow: hidden;
}
.tile:hover img, .tile.hover img {
transform: scale(1.2);
}
See the codepen below for an example
https://codepen.io/jamesCyrius/pen/pooqwwv
Here is a code
.zoom {
padding: 50px;
background-color: green;
transition: transform .2s; /* Animation */
width: 15px;
height: 15px;
margin: 0 auto;
}
.zoom:hover {
transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
<div class="zoom"></div>
I need to create an image gallery, in which the individual images are irregular triangles (emphasis on irregular).
I found limited examples on how to achieve triangle images via html and css, without modifying the images themselves. One example I found in this CodePen https://codepen.io/thebabydino/pen/liDCz was a step in the right direction, but looking at it, I can't find a way to make the images irregular triangles.
The result I am trying to achieve is this:
<div class='pageOption'>
<a href='#' class='option'>
<img src='~/images/team/pic_paggas/A.png'>
</a>
<a href='#' class='option'>
<img src='~/images/team/pic_paggas/D.png'>
</a>
</div>
This is the basic HTML I will be using and the CSS is:
.pageOption {
overflow: hidden;
position: relative;
margin: 0 auto;
width: 40em;
height: 27em;
}
.option, .option img {
width: 100%;
height: 100%;
}
.option {
overflow: hidden;
position: absolute;
transform: skewX(-55.98deg);
}
.option:first-child {
left: -.25em;
transform-origin: 100% 0;
}
.option:last-child {
right: -.25em;
transform-origin: 0 100%;
}
.option img {
opacity: .75;
transition: .5s;
}
.option img:hover {
opacity: 1;
}
.option img, .option:after {
transform: skewX(55.98deg);
transform-origin: inherit;
}
Mind that the HTML and CSS I have may not be the optimal for my problem. I think the shape of the images I am using (rectangular) have something to do with this.
Would be better if the solution is better supported across browsers.
You can do it with skew like below if you cannot use clip-path:
.box {
overflow: hidden;
width: 200px;
height: 200px;
display:inline-block;
}
.triangle {
width: 100%;
height: 100%;
transform: skewX(-20deg) skewY(45deg); /* 27deg instead of 20deg to have a regular triangle */
transform-origin: bottom left;
overflow: hidden;
background-size:0 0;
}
.triangle.bottom {
transform-origin: top right;
}
.triangle:before {
content: "";
display: block;
width: inherit;
height: inherit;
background-image: inherit;
background-size:cover;
background-position:center;
transform: skewY(-45deg) skewX(20deg); /* We invert order AND signs*/
transform-origin: inherit;
}
.triangle:hover {
filter:grayscale(100%);
}
.adjust {
margin-left:-120px;
}
body {
background:#f2f2f2;
}
<div class="box">
<div class="triangle" style="background-image:url(https://picsum.photos/id/155/1000/800)"></div>
</div>
<div class="box adjust">
<div class="triangle bottom" style="background-image:url(https://picsum.photos/id/159/1000/800)"></div>
</div>
I have a <div> which includes two <img>, one is the close button, the other one is a roommap. However, the roommap size is always different, so putting the close button in an absolute position doesnt seem to work.
Does anybody has an idea how I could achieve that the close button is based on the roommap size and always in top right corner? Also, the whole <div> is a popup which is centered in the middle of the screen.
.cont2 {
position: relative;
}
.cont2 .img2 {
position: absolute;
margin-top: 10%;
right: 10%;
z-index: 2;
}
.cont2 .img1 {
position: absolute;
margin-top: 15%;
left: 50%;
z-index: 1;
border: 4px solid black;
border-radius: 5px;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-transform: translateX(-50%);
}
<div class="cont2" id="popImg">
<img class="img2" width="40px" id="closebutton" src="https://placehold.it/40x40&text=Button">
<img class="img1" onclick="point_it(event)" id="roomchoose" src="https://placehold.it/150x150&text=Image" />
</div>
Ok, your issue is you need a div to just hold the image and be the same size so you can position your cross relative to the image size.
Try the following (I have added an extra image-holder div but if you don't want this, just make your main cont2 div inline-block):
.cont2 {
position: relative;
}
.cont2 .img2 {
position: absolute;
top: 10%;
right: 10%;
z-index: 2;
border:1px solid red;
}
.cont2 .image-holder {
display: inline-block;
position: absolute;
margin-top: 15%;
left: 50%;
border: 4px solid black;
border-radius: 5px;
transform: translateX(-50%);
}
.cont2 .image-holder img {
display: block
}
<div class="cont2" id="popImg">
<div class="image-holder">
<img class="img2" width="40px" id="closebutton" src="https://placehold.it/40x40&text=Button">
<img class="img1" onclick="point_it(event)" id="roomchoose" src="https://placehold.it/150x150&text=Image" />
</div>
</div>
I had to refactor your css a little but here is a working version:
#popImg {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
}
img {
position: absolute;
}
#closebutton {
right: 0;
top: 0;
z-index: 2;
cursor: pointer;
}
#roomchoose {
width: 100%;
height: auto;
z-index: 1;
}
<div class="cont2" id="popImg">
<img class="img2" id="closebutton" src="http://placehold.it/50x40/ff0000/ffffff">
<img class="img1" onclick="point_it(event)" id="roomchoose" src="http://placehold.it/500x400" />
</div>
The main changes are that the #popImg is now the element that is being offset to the centre. This was the main cause of your problems before, because the #closebutton had no relationship with the #roomchoose.
Now you use block wrapper, it has width 100%. Use inline-block wrapper for your image. And don't use position absolute for main image, it doesn't make width for parent div:
.cont2 {
position: relative;
text-align:center;
}
.cont2 .img2 {
position: absolute;
margin-top: 10%;
right: 10%;
z-index: 2;
}
.cont2 .img1 {
position: relative;
margin-top: 15%;
z-index: 1;
border: 4px solid black;
border-radius: 5px;
}
.wrapper{
display:inline-block;
position:relative;
}
<div class="cont2" id="popImg">
<span class="wrapper">
<img class="img2" width="40px" id="closebutton" src="https://placehold.it/40x40&text=Button">
<img class="img1" onclick="point_it(event)" id="roomchoose" src="https://placehold.it/150x150&text=Image" />
</span>
</div>
I am trying to make a corner ribbon to sit over an image, on a responsive design site. I have set up a fiddle page with the code I've got so far. As you can see there, it seems to insert a top margin (the corner of the ribbon is not disappearing) and the overflow is not hidden. Any ideas why?
JSfiddle
.ribbon-holder {
overflow: hidden;
}
.ribbon {
position: relative;
background: yellow;
color: black;
transform: rotate(-45deg);
text-align: center;
top: 52px;
left: -32px;
width: 145px;
}
<div class="ribbon-holder">
<div class="ribbon ribbon-holder">Free Shipping!</div>
<a href="http://www.somesite.com">
<img src="http://www.adventurouskate.com/wp-content/uploads/2016/01/planes-black-shower-curtain.jpg" alt="Shower Curtin" />
</a>
</div>
use position:relative in the parent (.ribbon-holder) and absolute in the child (.ribbon)
.ribbon-holder {
overflow: hidden;
position: relative
}
.ribbon {
position: absolute;
background: yellow;
color: black;
transform: rotate(-45deg);
text-align: center;
top: 32px;
left: -32px;
width: 145px;
}
<div class="ribbon-holder">
<div class="ribbon ribbon-holder">Free Shipping!</div>
<a href="http://www.somesite.com">
<img src="http://www.adventurouskate.com/wp-content/uploads/2016/01/planes-black-shower-curtain.jpg" alt="Shower Curtin" />
</a>
</div>
How about this:
html:
<div class="ribbon-holder" >
<a href="http://www.somesite.com" ><img itemprop="image" class="imageSize" src="http://www.adventurouskate.com/wp-content/uploads/2016/01/planes-black-shower-curtain.jpg" alt="Shower Curtin" /></a>
</div>
<div class="ribbon ribbon-holder">
Free Shipping!
</div>
css:
.ribbon-holder{
overflow: hidden;
}
.ribbon{
position: absolute;
background: yellow;
color: black;
transform: rotate(-45deg);
text-align: center;
top: 30px;
left: -32px;
width:145px;
}
https://jsfiddle.net/L4kojc4k/2/
Here are the changes i made :
.ribbon-holder{
overflow: hidden;
position: relative;// added by DamienBannerot
}
.ribbon{
position: absolute;// added by DamienBannerot
background: yellow;
color: black;
transform: rotate(-45deg);
text-align: center;
top: 32px;// added by DamienBannerot
left: -32px;// added by DamienBannerot
width:145px;
}
fiddle here : https://jsfiddle.net/L4kojc4k/4/