I'm designing a very basic website only with HTML and CSS.
In the design, I added some icons, which are images. These images I've added them in my HTML. I want to create a hover effect with another image. Any thoughts?
Here is my HTML and CSS
.icon-group {
width: 100%;
margin: 0 auto;
text-align: center;
padding-bottom: 15px;
}
.view-icon,
.edit-icon,
.delete-icon {
width: 50px;
height: 50px;
display: inline-block;
padding: 10px;
}
<div class="card one">
<img class="avatar" src="images/avatar-01.jpg" alt="Foto Felipe Kaiser">
<p class="name">Felipe Kaiser</p>
<p class="position">Periodista</p>
<hr>
<div class="icon-group">
<div class="view-icon">
<a href="#">
<img src="images/view-icon.png" alt="Icono ver">
</a>
</div>
<div class="edit-icon">
<a href="#">
<img src="images/edit-icon.png" alt="Icono editar">
</a>
</div>
<div class="delete-icon">
<a href="#">
<img src="images/delete-icon.png" alt="Icono delete">
</a>
</div>
</div>
</div>
To add a different behaviour of css while hovering any item, you have to define this behaviour and add :hover to the container id/class. In your exemple, it may be :
.icon-group {
width: 100%;
margin: 0 auto;
text-align: center;
padding-bottom: 15px;
}
.icon-group:hover {
background-color: grey;
}
for exemple
Related
It seems no matter what I do, I cannot get my images to line up in height. Am I missing something? Originally all images were varying sizes, but I adjusted the resolution in a photo editing software so they are all the same height (1500px) and, for added reinforcement, I have put the height in the image tag as well, yet they are still not lining up and seem to retain their original height/size. It is not a file naming issue as I have checked and double checked these are correct.
Is it a max-width vs max-height issue? They either need to line up uniformly in width or in height, and can't be both unless the images are the exact same sizes? This is my HTML and CSS. I am using a framework called "uiKit" (https://getuikit.com/) and have included its applicable CSS in the code below.
html,
body {
margin: 0;
background-size: cover;
}
.wrapper {
margin-top: 75px;
}
nav {
padding: 25px 25px 75px 175px;
}
address,
dl,
fieldset,
figure,
ol,
p,
pre,
ul {
margin: 0 0 0 0!important;
}
li {
list-style-type: none;
}
.nav-wrapper {
display: flex;
justify-content: space-between;
}
.nav-right {
display: flex;
font-size: 0.875rem;
color: #999;
}
.leftnavpadding {
padding: 0px 0px 0px 20px;
}
footer a {
color: purple;
}
/*Photos page*/
.photoswrapper {
margin: 75px;
}
.photo-grid-padding>* {
padding: 0!important
}
.uk-lightbox-toolbar {
padding: 10px 10px;
background: rgba(0, 0, 0, 0.0);
color: rgba(255, 255, 255, 0.7);
}
.uk-lightbox {
background-color: white;
}
#photomenuwrapper {
padding: 10px;
}
h3.photolink:hover,
.photolink:active {
color: white;
}
/*footer*/
footer {
padding: 150px 100px 100px 100px;
}
.footersocial {
width: 100%;
display: flex;
justify-content: center;
}
.uk-child-width-1-2>* {
width: 50%;
}
.uk-grid {
display: flex;
/* 1 */
flex-wrap: wrap;
/* 2 */
margin: 0;
padding: 0;
list-style: none;
}
[class*='uk-inline'] {
/* 1 */
display: inline-block;
/* 2 */
position: relative;
/* 3 */
max-width: 100%;
/* 4 */
vertical-align: middle;
/* 5 */
-webkit-backface-visibility: hidden;
}
<div class="photowrapper">
<div class="photo-grid-padding uk-child-width-1-2#l" uk-grid>
<div>
<a class="uk-inline" href="houses.htm">
<img src="img/houses/houses01.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">houses</h3>
</div>
</a>
</div>
<div>
<a class="uk-inline" href="yangshuo.htm">
<img src="img/yangshuo/yangshuo1.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">yangshuo</h3>
</div>
</a>
</div>
<div>
<a class="uk-inline" href="nature.htm">
<img src="img/nature/nature1.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">nature</h3>
</div>
</a>
</div>
<div>
<a class="uk-inline" href="buildings.htm">
<img src="img/buildings/buildings1.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">buildings</h3>
</div>
</a>
</div>
<div>
<a class="uk-inline" href="lasvegas.htm">
<img src="img/lasvegas/lasvegas1.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">lasvegas</h3>
</div>
</a>
</div>
<div>
<a class="uk-inline" href="tripinterrupted.htm">
<img src="img/tripinterrupted/tripinterrupted2.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">trip interrupted</h3>
</div>
</a>
</div>
<div>
<a class="uk-inline" href="otherstuff.htm">
<img src="img/otherstuff/other1.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">other stuff</h3>
</div>
</a>
</div>
<div>
<a class="uk-inline" href="design.htm">
<img src="img/design/infographic.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">design
<h3>
</div>
</a>
</div>
To let you know: I tried this suggestion:
https://codepen.io/blimpage/embed/obWdgp?default-tab=result&theme-id=dark
and the images lined up perfectly on a test page with no framework added.
But unfortunately when I inserted that solution into my page with the framework, and specifically when I put the display: flex style in the div around my rows in the grid it messed up the alignment of both the framework and the attempted solution, and neither was then working as they should have been.
I have put the HTML and CSS for that attempted solution below.
Any info or knowledge that would make my images align up in their height to create a clean row would help me out. Please if someone could let me know if I am missing something! Also, am a DIY beginner coder, please be gentle with me, I still have lots to learn!
img {
width: 100%;
height: auto;
vertical-align: middle;
}
.picsinarow {
display: inline-flex
}
}
.container {
background: white;
margin: 0 auto;
padding: 5%;
width: 75%;
}
.b1 {
flex: 1.3431
}
.n1 {
flex: 1.3333
}
<div class="photowrapper">
<div class="photo-grid-padding uk-child-width-1-2#l" uk-grid>
<div class="picinarow">
<a class="uk-inline" href="houses.htm">
<img src="img/houses/houses01.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">houses</h3>
</div>
</a>
</div>
<div>
<a class="uk-inline" href="yangshuo.htm">
<img src="img/yangshuo/yangshuo1.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">yangshuo</h3>
</div>
</a>
</div>
<!-- end of pic in a row -->
</div>
<!-- end of photowrapper -->
To be clear, I am no longer using this code as it caused problems once I tried to integrate it into the uikit framework I am using.
Thank you so much!!
I'm trying to put six .png images over a long, tray-like image. I don't know if my structure is wrong or if bootstrap is in conflict with CSS when I play around with position: absolute and position: relative (which I later removed). This is the result I expected:
However, this is my current status:
Here's my code.
HTML code:
<div class="d-flex flex-row mt-2">
<div class="">
<img class="tray" src="../../../assets/images/Generals/Icon_1.png" alt="">
</div>
<div class="">
<img class="tray-icon" src="../../../assets/images/Generals/Icon_2.png" alt="">
</div>
<div class="">
<img class="tray-icon" src="../../../assets/images/Generals/Icon_3.png" alt="">
</div>
<div class="">
<img class="tray-icon" src="../../../assets/images/Generals/Icon_4.png" alt="">
</div>
<div class="">
<img class="tray-icon" src="../../../assets/images/Generals/Icon_5.png" alt="">
</div>
<div class="">
<img class="tray-icon" src="../../../assets/images/Generals/Icon_6.png" alt="">
</div>
<div class="">
<img class="tray-icon" src="../../../assets/images/Generals/Icon_7.png" alt="">
</div>
</div>
CSS code:
.tray-icon{
width: 70%;
transition: transform .2s;
}
.tray{
width: 100%;
}
.tray-icon:hover {
transform: scale(1.5);
}
Any idea how can I get closer to the expected result?
Given the info/code you've placed in your question:
Give each image: display: block; so that they each moves to a new line.
Center everything. Might be a mixture of text-align: center; which typically centers it's inline/inline-block children (unless over-ridden), or try using margin: 0 auto; which typically centers inline-block/block elements.
At this point everything should be centered in .d-flex.flex-row. Move the dark blue image up into position by giving it a negative margin-top: margin: -40px auto 0;. You could also use position: relative; top: -40px;, or transform: translateY(-40px);. Pick your poison.
Your code should something like the example code I've attached below. Some rules won't apply as well, like box-shadow (if you're using on on an image for example).
.d-flex.flex-row {
margin: 0 auto;
padding: 0;
text-align: center;
}
/* this is the dark blue square. */
.d-flex.flex-row::after {
content: "";
background-image: url(https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=500&height=70);
width: 500px;
height: 70px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
margin: -40px auto 0;
display: block;
background-size: cover;
}
/* your image containers */
.d-flex.flex-row > div {
display: inline-block;
margin: 10px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
box-shadow: 2px 5px 10px rgba(0,0,0,0.3);
overflow: hidden;
}
/* your images */
.d-flex.flex-row > div img {
display: block;
}
<div class="d-flex flex-row mt-2">
<div class="">
<img class="tray" src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=50&height=50" alt="">
</div>
<div class="">
<img class="tray" src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=50&height=50" alt="">
</div>
<div class="">
<img class="tray" src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=50&height=50" alt="">
</div>
<div class="">
<img class="tray" src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=50&height=50" alt="">
</div>
<div class="">
<img class="tray" src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=50&height=50" alt="">
</div>
<div class="">
<img class="tray" src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=50&height=50" alt="">
</div>
</div>
I want the text below my images to fit exactly below them. Longer texts continue in the same line which is not I want. I want it to go to the next line and stay below the corresponding image.
I also tried using break-word and aligning center but it doesn't work.
.row div {
display: inline-block;
padding-left: 5%;
padding-right: 5%;
}
.row div img {
max-width: 100%;
max-height: 100%;
}
.row div a {
word-wrap: break-word;
text-align: center;
}
<div class="row">
<div>
<a href="#">
<img src="martial.png">
</br>Manchester United 2015-16 Martial kit
</a>
</div>
<div>
<a href="#">
<img src="ars.png">
</a>
</div>
<div>
<a href="#">
<img src="bvb.png">
</a>
</div>
<div>
<a href="#">
<img src="lewandowski1.png">
</a>
</div>
</div>
You gonna have to add additional div container for every image and link.
See the example below:
.row div{
display: inline-block;
padding-left: 5%;
padding-right: 5%;
}
.row div img{
max-width: 100%;
max-height: 100%;
}
.row div a{
word-wrap:break-word;
text-align:center;
}
.img-container{
display: inline-block; /* added */
float: left; /* added */
text-align: center; /* added */
}
<div class="row">
<div class="img-container">
<img src="http://i3.mirror.co.uk/incoming/article6363634.ece/ALTERNATES/s615b/Anthony-Martial-signs-for-Manchester-United.jpg"></br>Manchester United 2015-16 Martial kit text aded text aded text aded text aded text aded
</div>
<div class="img-container">
<img src="ars.png">
</div>
<div class="img-container">
<img src="bvb.png">
</div>
<div class="img-container">
<img src="lewandowski1.png">
</div>
</div>
If you want to set a predefined width and height you can do it adding rules to .img-container class. Other way it will take the image dimensions. And for centered links just add this rule to .img-container class:
text-align: center;
just give your inner divs a width
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.row div {
border: 1px solid black;
width: 40%;
display: inline-block;
padding-left: 5%;
padding-right: 5%;
//overflow: auto;
}
.row div img {
max-width: 100%;
max-height: 100%;
}
.row div a {
word-wrap: break-word;
text-align: center;
}
</style>
</head>
<body>
<div class="row">
<div>
<a href="#">
<img src="http://e0.365dm.com/15/09/768x432/anthony-martial-manchester-united-press_3345052.jpg?20150904202157">Manchester United 2015-16 Martial fjkghdghjfdhghdfjgjgdfgjhghjhghjgdhjgdhgjdfgdjjhdgjhdffhgfhghdfgjhgdhjdghgfdgjgdfgdfjhjdfgdhjkit</a>
</div>
<div>
<a href="#">
<img src="http://e0.365dm.com/15/09/768x432/anthony-martial-manchester-united-press_3345052.jpg?20150904202157">Manchester United 2015-16 Martial fjkghdghjfdhghdfjgjgdfgjhghjhghjgdhjgdhgjdfgdjjhdgjhdffhgfhghdfgjhgdhjdghgfdgjgdfgdfjhjdfgdhjkit</a>
</div>
</div>
</body>
</html>
Use the min-content property on the element containing the img and caption. In this demo, I used the figure and figcaption (and main) elements instead of divs to create semantic layout. It'll work the same way if you prefer `div's instead.
.row figure {
display: inline-block;
padding-left: 5%;
padding-right: 5%;
/* min-content needs to be prefixed */
width: -moz-min-content;
width: -webkit-min-content;
width: min-content;
}
.row figure img {
display: inline-block;
/* Changed max-* to min-* to demonstrate images in different sizes */
min-width: 100%;
min-height: 100%;
}
.row figure a {
word-wrap: break-word;
text-align: center;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Captions</title>
</head>
<body>
<main class="row">
<figure>
<a href="#">
<img src="http://placehold.it/300x150/9a7/a10.png&text=Manchester+United+2015-16+Martial+Kit">
<figcaption>Manchester United 2015-16 Martial Kit</figcaption>
</a>
</figure>
<figure>
<a href="#">
<img src="http://placehold.it/100x50/fd3/b0d.png&text=ARS">
<figcaption>Manchester United 2015-16 Martial Kit</figcaption>
</a>
</figure>
<figure>
<a href="#">
<img src="http://placehold.it/200x100/fa8/375.png&text=BVB">
<figcaption>Manchester United 2015-16 Martial Kit</figcaption>
</a>
</figure>
<figure>
<a href="#">
<img src="http://placehold.it/400x200/048/Fee.png&text=lewandowski1">
<figcaption>Manchester United 2015-16 Martial Kit</figcaption>
</a>
</figure>
</main>
</body>
</html>
I'm trying to make a layout like this. All the banners have static dimensions and a bottom margin. And the article needs padding. The problem is the value of the width property of article. After locating the banners, I want to give the rest of the entire page width to article element. Here is my code:
#SidePane {
display: inline-block;
float: left;
}
.SideBanner {
display: block;
width: 250px;
height: 157px;
margin: 0 0 5px 0;
}
#SiteEye {
width: ???????????????????????;
height: 700px;
padding: 10px;
color: #4F2412;
background-color: #F9F6F4;
display: inline-block;
}
<div id="SiteCenter">
<div id="SiteEye">
<h1>title</h1>
<p>p1</p>
<p>p2</p>
</div>
<div id="SidePane">
<a href="">
<img class="SideBanner" src="images/banners/b1.jpg" alt="banner1" />
</a>
<a href="">
<img class="SideBanner" src="images/banners/b2.jpg" alt="banner1" />
</a>
<a href="">
<img class="SideBanner" src="images/banners/b3.jpg" alt="banner1" />
</a>
<a href="">
<img class="SideBanner" src="images/banners/b4.jpg" alt="banner1" />
</a>
</div>
</div>
You may use calc method:
width: calc(100% - 250px);
See can i use calc? before using it for it's browser compatibility.
RE: Comment on Bhojendra's answer
There is another way, it involves using box-sizing:border-box;, one of the most useful additions to CSS, like, ever!
I've also updated your images to use a top padding on all except the first one because you were causing some white-space at the bottom of the page with the previous method.
* {
box-sizing:border-box; /* Make all height/width inclusive of padding and border */
}
body {
margin:0;
padding:0;
}
#SidePane {
display: inline-block;
float: left;
}
.SideBanner {
display: block;
width: 250px;
height: 175px;
padding: 5px 0 0 0;
}
#SidePane a:first-child .SideBanner {
padding:0;
}
#SiteEye {
width: calc(100% - 250px);
height: 700px;
color: #4F2412;
background-color: #F9F6F4;
display: inline-block;
padding:10px;
}
<div id="SiteCenter">
<div id="SiteEye">
<h1>title</h1>
<p>p1</p>
<p>p2</p>
</div>
<div id="SidePane">
<a href="">
<img class="SideBanner" src="http://placehold.it/250x170" alt="banner1" />
</a>
<a href="">
<img class="SideBanner" src="http://placehold.it/250x170" alt="banner1" />
</a>
<a href="">
<img class="SideBanner" src="http://placehold.it/250x170" alt="banner1" />
</a>
<a href="">
<img class="SideBanner" src="http://placehold.it/250x170" alt="banner1" />
</a>
</div>
</div>
---HTML
<div id="story">
<div id="individual">
<img src='uploads/1231924837Picture.png'/>
<h2>2009-01-14</h2>
<h1>Headline</h1>
<p>stroy story etc stroy story etc stroy story etc</p>
</div>
<br />
<div id="storynav">
<a href='home.php?start=0'>1</a>
<a href='home.php?start=1'>2</a>
<a href='home.php?start=2'>3</a>
<a href='home.php?start=3'>4</a>
<a href='home.php?start=4'>5</a>
<a href='home.php?start=5'>6</a>
<a href='home.php?start=6'>7</a>
<a href='home.php?start=7'>8</a>
<a href='home.php?start=8'>9</a>
</div>
</div>
---CSS
#story img{
border: none;
float: right;
display: inline;
padding: 10px;
margin-top: 30px;
}
#story{
width: 600px;
height: inherit;
background-color:black;
margin-left: 34px;
margin-bottom: 3px;
}
#individual{
background-color: #000000;
clear:both;
}
#storynav{
font-size: 10px;
text-align: center;
}
(source: bionic-comms.co.uk)
The above code and css is giving me a headache because, as the picture shows, the div background color gets confused when i add images in. This is dynamic content but i thought it would be easier to show the static html. Can any one tell me what i am doing wrong? The background color should cover the picture as well. Thanks!
EDIT
Thanks for that. It is something i had previously tried but it doesn't do anything. I have also tried a spacer in there as well and that doesn't do anything. Flummoxed!
You are setting the image to float right which means that the container div cannot work out it's actual height. You need to clear the floated element which essentially lets the container know how large the image actualy is.
You will need to add an element with the style clear: both; underneath the img tag in your HTML, preferably at the end of the div like so:
<div id="story">
<div id="individual">
<img src='uploads/1231924837Picture.png'/>
<h2>2009-01-14</h2>
<h1>Headline</h1>
<p>stroy story etc stroy story etc stroy story etc</p>
</div>
<br />
<div id="storynav">
<a href='home.php?start=0'>1</a>
<a href='home.php?start=1'>2</a>
<a href='home.php?start=2'>3</a>
<a href='home.php?start=3'>4</a>
<a href='home.php?start=4'>5</a>
<a href='home.php?start=5'>6</a>
<a href='home.php?start=6'>7</a>
<a href='home.php?start=7'>8</a>
<a href='home.php?start=8'>9</a>
</div>
<div class="clear"></div> <-- add this here
</div>
And add the class:
.clear
{
clear: both;
}
Read that: http://www.quirksmode.org/css/clearing.html
In short, try this:
---HTML
<div id="story">
<div id="individual">
<img src='uploads/1231924837Picture.png'/>
<h2>2009-01-14</h2>
<h1>Headline</h1>
<p>stroy story etc stroy story etc stroy story etc</p>
</div>
<br />
<div id="storynav">
<a href='home.php?start=0'>1</a>
<a href='home.php?start=1'>2</a>
<a href='home.php?start=2'>3</a>
<a href='home.php?start=3'>4</a>
<a href='home.php?start=4'>5</a>
<a href='home.php?start=5'>6</a>
<a href='home.php?start=6'>7</a>
<a href='home.php?start=7'>8</a>
<a href='home.php?start=8'>9</a>
<div class="clear"></div>
</div>
</div>
---CSS
#story img{
border: none;
float: right;
display: inline;
padding: 10px;
margin-top: 30px;
}
#story{
width: 600px;
height: inherit;
background-color:black;
margin-left: 34px;
margin-bottom: 3px;
}
#individual{
background-color: #000000;
clear:both;
}
#storynav{
font-size: 10px;
text-align: center;
}
.clear {
clear: both;
}