Rotated squares as an Image - html

Question

I'm new in HTML, CSS. Also I'm still learn so please be understanding.
I'm trying to do some kind of art gallery which will be looks like this:
I create this squares with help of tutorial, but I want to upgrade thisand put an image instead squares, but I have no idea how to do this. Any tips ?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #99CCFF;
}
.container {
max-width: 1070px;
padding: 0 30px;
margin: 0 auto;
}
.diamond {
width: 11.5%;
padding-bottom: 11.5%;
background-color: rgba(255, 255, 255, 0.3);
display: inline-block;
}
.diamond-big {
width: 25%;
padding-bottom: 25%;
background-color: rgba(255, 255, 255, 0.6);
display: inline-block;
}
.grid {
position: relative;
padding-bottom: 100%;
transform: rotate(45deg);
transform-origin: 39%;
}
.grid-section {
overflow: hidden;
padding-bottom: 200px;
}
#diamond1 {
position: absolute;
top: 25%;
left: 10.5%;
cursor: pointer;
}
#diamond2 {
position: absolute;
top: 25%;
left: 24%;
}
#diamond3 {
position: absolute;
top: 11.5%;
left: 37.5%;
}
#diamond4 {
position: absolute;
top: 38.5%;
left: 24%;
}
#diamond5 {
position: absolute;
top: 38.5%;
left: 51%;
}
#diamond6 {
position: absolute;
top: 52%;
left: 51%;
}
#diamond7 {
position: absolute;
top: 38.5%;
left: 64.5%;
}
#diamond8 {
position: absolute;
top: 65.5%;
left: 51%;
}
#diamond9 {
position: absolute;
top: 65.5%;
left: 64.5%;
}
<div class="container">
<section class="grid-section">
<div class="grid">
<div id="diamond1" class="diamond"></div>
<div id="diamond2" class="diamond"></div>
<div id="diamond3" class="diamond-big"></div>
<div id="diamond4" class="diamond-big"></div>
<div id="diamond5" class="diamond"></div>
<div id="diamond6" class="diamond"></div>
<div id="diamond7" class="diamond-big"></div>
<div id="diamond8" class="diamond"></div>
<div id="diamond9" class="diamond-big"></div>
</div>
</section>
</div>

Answer 1

If you want to make the images easy downloadable or don't want to use background-image in css, you can do something like this. I've added images inside the divs and added the following css:
.diamond {
width: 11.5%;
padding-bottom: 11.5%;
background-color: rgba(255, 255, 255, 0.3);
display: inline-block;
position:relative;
overflow:hidden;
}
.diamond img, .diamond-big img
{ position:absolute;
left:-25%;
top:-25%;
width:150%;
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);
}
.diamond-big {
width: 25%;
padding-bottom: 25%;
background-color: rgba(255, 255, 255, 0.6);
display: inline-block;
position:relative;
overflow:hidden;
}
this makes the images as large as the squares.
Full code snippet:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #99CCFF;
}
.container {
max-width: 1070px;
padding: 0 30px;
margin: 0 auto;
}
.diamond {
width: 11.5%;
padding-bottom: 11.5%;
background-color: rgba(255, 255, 255, 0.3);
display: inline-block;
position:relative;
overflow:hidden;
}
.diamond img, .diamond-big img
{ position:absolute;
left:-25%;
top:-25%;
width:150%;
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);
}
.diamond-big {
width: 25%;
padding-bottom: 25%;
background-color: rgba(255, 255, 255, 0.6);
display: inline-block;
position:relative;
overflow:hidden;
}
.grid {
position: relative;
padding-bottom: 100%;
transform: rotate(45deg);
transform-origin: 39%;
}
.grid-section {
overflow: hidden;
padding-bottom: 200px;
}
#diamond1 {
position: absolute;
top: 25%;
left: 10.5%;
cursor: pointer;
}
#diamond2 {
position: absolute;
top: 25%;
left: 24%;
}
#diamond3 {
position: absolute;
top: 11.5%;
left: 37.5%;
}
#diamond4 {
position: absolute;
top: 38.5%;
left: 24%;
}
#diamond5 {
position: absolute;
top: 38.5%;
left: 51%;
}
#diamond6 {
position: absolute;
top: 52%;
left: 51%;
}
#diamond7 {
position: absolute;
top: 38.5%;
left: 64.5%;
}
#diamond8 {
position: absolute;
top: 65.5%;
left: 51%;
}
#diamond9 {
position: absolute;
top: 65.5%;
left: 64.5%;
}
<div class="container">
<section class="grid-section">
<div class="grid">
<div id="diamond1" class="diamond"><img src="http://placehold.it/400x400" alt="alter"/></div>
<div id="diamond2" class="diamond"><img src="http://placehold.it/400x400" alt="alter"/></div>
<div id="diamond3" class="diamond-big"><img src="http://placehold.it/400x400" alt="alter"/></div>
<div id="diamond4" class="diamond-big"><img src="http://placehold.it/400x400" alt="alter"/></div>
<div id="diamond5" class="diamond"><img src="http://placehold.it/400x400" alt="alter"/></div>
<div id="diamond6" class="diamond"><img src="http://placehold.it/400x400" alt="alter"/></div>
<div id="diamond7" class="diamond-big"><img src="http://placehold.it/400x400" alt="alter"/></div>
<div id="diamond8" class="diamond"><img src="http://placehold.it/400x400" alt="alter"/></div>
<div id="diamond9" class="diamond-big"><img src="http://placehold.it/400x400" alt="alter"/></div>
</div>
</section>
</div>

Answer 2

Try to add the property background-image to the diamond and diamond-big classes. For example:
.diamond {
width: 11.5%;
padding-bottom: 11.5%;
background-image: url("image.jpg");
background-color: rgba(255, 255, 255, 0.3);
display: inline-block;
}
If you don't see the image anyway, try to add height property too.

Answer 3

There are many ways to do this
One of the quickest is to swap out the <div> tags with <img> tags while keeping the class and id attributes
in your case you need to adjust some of you CSS to avoid unnecessary padding
here's a working example: (needs polishing)
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #99CCFF;
}
.container {
max-width: 1070px;
padding: 0 30px;
margin: 0 auto;
}
.diamond {
width: 11.5%;
padding: 0 auto;
background-color: rgba(255, 255, 255, 0.3);
display: inline-block;
}
.diamond-big {
width: 25%;
padding: 0 auto;
background-color: rgba(255, 255, 255, 0.6);
display: inline-block;
}
.grid {
position: relative;
padding-bottom: 100%;
transform: rotate(45deg);
transform-origin: 39%;
}
.grid-section {
overflow: hidden;
padding-bottom: 200px;
}
#diamond1 {
position: absolute;
top: 25%;
left: 10.5%;
cursor: pointer;
}
#diamond2 {
position: absolute;
top: 25%;
left: 24%;
}
#diamond3 {
position: absolute;
top: 11.5%;
left: 37.5%;
}
#diamond4 {
position: absolute;
top: 38.5%;
left: 24%;
}
#diamond5 {
position: absolute;
top: 38.5%;
left: 51%;
}
#diamond6 {
position: absolute;
top: 52%;
left: 51%;
}
#diamond7 {
position: absolute;
top: 38.5%;
left: 64.5%;
}
#diamond8 {
position: absolute;
top: 65.5%;
left: 51%;
}
#diamond9 {
position: absolute;
top: 65.5%;
left: 64.5%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pokręcone Gridy</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/alert.js"></script>
</head>
<body>
<div class="container">
<section class="grid-section">
<div class="grid">
<img id="diamond1" src="http://images.fineartamerica.com/images-medium-large-5/blink-cat-square-art-michelle-wrighton.jpg" class="diamond">
<img id="diamond2" src="http://vastrevets.com/wp-content/uploads/2014/01/Cat-square-1-300x258.jpg" class="diamond">
<img id="diamond3" src="http://www.summitmobilevet.com/wp-content/uploads/2015/04/cat-square.jpg" class="diamond-big">
<img id="diamond4" src="http://1.bp.blogspot.com/-gMWmYwKZYZk/TvZFNMxEE0I/AAAAAAAAB1Q/Ka6cF95MCVA/s1600/mousecattoy1square.jpg" class="diamond-big">
<img id="diamond5" src="https://ae01.alicdn.com/kf/HTB13WWmIpXXXXbEXpXXq6xXFXXXy/DIY-Diamond-embroidery-font-b-Small-b-font-font-b-cat-b-font-square-drill-paste.jpg" class="diamond">
<img id="diamond6" src="http://fineartamerica.com/images/artworkimages/medium/1/orange-tabby-cat--square-jai-johnson.jpg" class="diamond">
<img id="diamond7" src="https://ae01.alicdn.com/kf/HTB1C339KVXXXXaGXpXXq6xXFXXX8/Needlework-Diamond-Embroidery-Home-Decoration-Diamond-Painting-Cross-Stitch-font-b-Laughing-b-font-Cat-Square.jpg" class="diamond-big">
<img id="diamond8" src="https://ae01.alicdn.com/kf/HTB1UsFCKpXXXXXPXXXXq6xXFXXXh/Diamond-embroidery-Three-font-b-small-b-font-font-b-cats-b-font-square-drill-paste.jpg" class="diamond">
<img id="diamond9" src="http://www.dhresource.com/0x0s/f2-albu-g1-M00-CD-F9-rBVaGVVN8-mAa_kSAACnesiYQsA716.jpg/diy-square-diamond-painting-cat-cartoon-animal.jpg" class="diamond-big">
</div>
</section>
</div>
</body>
</html>

Answer 4

The way I see it, you have two options:
Option 1: HTML and CSS (max-width)
You can just simply insert the img inside your div and set the max-width to 100%, like:
<div id="diamond2" class="diamond">
<img style="max-width: 100%" src="yourpicture.jpg">
</div>
If you do this, you have to make sure the divs are set to the right size for the picture (or at least the proportions), and use the max-width attribute.
Option 2: Using CSS
Set them as background on your CSS and use the right type of background-size (cover or contain):
#diamond6 {
background-image: url('yourpicture.jpg');
background-size: cover;
position: absolute;
top: 52%;
left: 51%;
}
I hope it helps!

Answer 5

Use background-image with background-size like
background-image: url('http://placehold.it/100');
background-size: 100% 100%;
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #99CCFF;
}
.container {
max-width: 1070px;
padding: 0 30px;
margin: 0 auto;
}
.diamond {
width: 11.5%;
padding-bottom: 11.5%;
background-color: rgba(255, 255, 255, 0.3);
display: inline-block;
background-image: url('http://placehold.it/100');
background-size: 100% 100%;
}
.diamond-big {
width: 25%;
padding-bottom: 25%;
background-color: rgba(255, 255, 255, 0.6);
display: inline-block;
}
.grid {
position: relative;
padding-bottom: 100%;
transform: rotate(45deg);
transform-origin: 39%;
}
.grid-section {
overflow: hidden;
padding-bottom: 200px;
}
#diamond1 {
position: absolute;
top: 25%;
left: 10.5%;
cursor: pointer;
}
#diamond2 {
position: absolute;
top: 25%;
left: 24%;
}
#diamond3 {
position: absolute;
top: 11.5%;
left: 37.5%;
}
#diamond4 {
position: absolute;
top: 38.5%;
left: 24%;
}
#diamond5 {
position: absolute;
top: 38.5%;
left: 51%;
}
#diamond6 {
position: absolute;
top: 52%;
left: 51%;
}
#diamond7 {
position: absolute;
top: 38.5%;
left: 64.5%;
}
#diamond8 {
position: absolute;
top: 65.5%;
left: 51%;
}
#diamond9 {
position: absolute;
top: 65.5%;
left: 64.5%;
}
<div class="container">
<section class="grid-section">
<div class="grid">
<div id="diamond1" class="diamond"></div>
<div id="diamond2" class="diamond"></div>
<div id="diamond3" class="diamond-big"></div>
<div id="diamond4" class="diamond-big"></div>
<div id="diamond5" class="diamond"></div>
<div id="diamond6" class="diamond"></div>
<div id="diamond7" class="diamond-big"></div>
<div id="diamond8" class="diamond"></div>
<div id="diamond9" class="diamond-big"></div>
</div>
</section>
</div>