<div class="one">
<div class="presetHolder"><h3>Energy Solutions</h3>
<div class="imageHolder">
<div class="image"> <img src="/gogivers/assets/Image/energy1.jpg" alt="" height="70" width="70"> </div>
<div class="image"> <img src="/gogivers/assets/Image/energy2.jpg" alt="" height="70" width="70"> </div>
<div class="image"> <img src="/gogivers/assets/Image/energy3.jpg" alt="" height="70" width="70"> </div>
<div class="image"> <img src="/gogivers/assets/Image/energy4.jpg" alt="" height="70" width="70"> </div>
<div class="image"> <img src="/gogivers/assets/Image/energy5.jpg" alt="" height="70" width="70"> </div>
<div class="image"> <img src="/gogivers/assets/Image/energy6.jpg" alt="" height="70" width="70"> </div>
<div class="image"> <img src="/gogivers/assets/Image/energy7.jpg" alt="" height="70" width="70"> </div>
<div class="image"> <img src="/gogivers/assets/Image/energy8.jpg" alt="" height="70" width="70"> </div>
</div>
</div>
</div>
I am trying to place a hover effect on the div "one", however the hover effect will only highlight the presetHolder div or the imageHolder div.
Can someone suggest the CSS I would need to do this?
.one:hover .presetHolder {
your hovered styles here
}
or
.one:hover .imageHolder {
your hovered styles here
}
Related
I am trying to make my portfolio responsive but having some issues with bootstrap.
I have 4 divs which should take up the width of the screen evenly. I have a class of row d-none d-sm-block on it. This should hide this set of divs and toggle my mobile view when the screen falls below 576 pixels. This seems to be working.
I also have a col-sm-3 on each of the 4 divs. This is looks like the problem. It supposed to take up the width evenly and it does - Until you get to a width of 770 pixels or below then the divs stack in 4 rows instead of one. When the width of the screen gets to about 760 pixels
Upon inspection it looks like the column is taking up the whole width of the screen for some reason. I can't figure out what the issue is. The entire website can be found on heroku. You'd have to scroll down to "Main Technology Stack":
https://mighty-ocean-12133.herokuapp.com/
Here's a code snippet of what I have:
<div className="container">
<div className="row d-none d-sm-block">
<div style={{cursor: "pointer"}} className="col-sm-3" onMouseOver={this.openBox.bind(this,'ReactJS')} onMouseLeave={this.fadeIn.bind(this, 'ReactJS')}>
<img width="100%" height="100%" src="/assets/ReactJS.png" alt=""></img>
</div>
<div style={{cursor: "pointer"}} className="col-sm-3" onMouseOver={this.openBox.bind(this,'AngularJS')} onMouseLeave={this.fadeIn.bind(this, 'AngularJS')}>
<img width="100%" height="100%" src="/assets/AngularJS.png" alt=""></img>
</div>
<div style={{cursor: "pointer"}} className="col-sm-3" onMouseOver={this.openBox.bind(this,'Java')} onMouseLeave={this.fadeIn.bind(this, 'Java')}>
<img width="100%" height="100%" src="/assets/Java.jpg" alt=""></img>
</div>
<div style={{cursor: "pointer"}} className="col-sm-3" onMouseOver={this.openBox.bind(this,'Accessibility')} onMouseLeave={this.fadeIn.bind(this, 'Accessibility')}>
<img width="100%" height="100%" src="/assets/Accessibility.png" alt=""></img>
</div>
</div>
<div className="row d-block d-sm-none">
<div style={{cursor: "pointer"}} className="col-md-3">
<img src="/assets/ReactJS.png" alt=""></img>
</div>
<div style={{cursor: "pointer"}} className="col-md-3">
<img src="/assets/AngularJS.png" alt=""></img>
</div>
<div style={{cursor: "pointer"}} className="col-md-3">
<img src="/assets/Java.jpg" alt=""></img>
</div>
<div style={{cursor: "pointer"}} className="col-md-3">
<img src="/assets/Accessibility.png" alt=""></img>
</div>
</div>
</div>
Any other random comments on my portfolio is appreciated as well.
Simply use d-flex flex-row with combination of justify-content-around or justify-content-between
I have used Bootstrap 4 here.
<body>
<div class="container-fluid bg-light">
<div class="col-12">
<div class="row d-flex flex-row justify-content-around">
<div class="border border-dark">
<img src="./images/reactjs.png" alt="" />
</div>
<div class="border border-dark">
<img src="./images/angularjs.png" alt="" />
</div>
<div class="border border-dark">
<img src="./images/java.png" alt="" />
</div>
<div class="border border-dark">
<img src="./images/accessibility.png" alt="" />
</div>
</div>
</div>
</div>
</body>
Hope it will help you.
I'm having trouble figuring out how to center an image vertically and horizontally. Essentially I have two rows of images, all have a width of 150 but heights vary.
CSS
.image-center {
display: inline-block;
vertical-align: middle;
position: relative;
}
HTML
<div class="row">
<div class="col">
<img class="center-block image-center" width="150" src="imagery/1.png"/>
</div>
<div class="col">
<img class="center-block image-center" width="150" src="imagery/2.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/3.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/4.png"/>
</div>
</div>
<div class="row">
<div class="col">
<img class="center-block" width="150" src="imagery/5.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/6.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/7.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/8.png"/>
</div>
</div>
If you're using Bootstrap 4 (it seems you are), you may use flex alignment classes like align-items-center justify-content-center
<div class="col d-flex align-items-center justify-content-center">
More info: https://getbootstrap.com/docs/4.1/layout/grid/#alignment
This CSS will be responsive for any devices. It will center horizontally and vertically.
.col {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
HTML:
<div class="row imageCenterAlign topAlign">
<div class="col">
<img class="center-block image-center" width="150" src="imagery/1.png"/>
</div>
<div class="col">
<img class="center-block image-center" width="150" src="imagery/2.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/3.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/4.png"/>
</div>
</div>
<div class="row imageCenterAlign">
<div class="col">
<img class="center-block" width="150" src="imagery/5.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/6.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/7.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/8.png"/>
</div>
</div>
css:
.imageCenterAlign{
display: flex;
justify-content: center;
align-items: center;
}
.topAlign{
top:50%;
}
The best way to accomplish this would be to use flexbox imho.
HTML:
<div class="group">
<img src="https://fakeimg.pl/150x100/?text=Hello" />
<img src="https://fakeimg.pl/150x110/?text=Hello" />
<img src="https://fakeimg.pl/150x120/?text=Hello" />
<img src="https://fakeimg.pl/150x80/?text=Hello" />
<img src="https://fakeimg.pl/150x70/?text=Hello" />
<img src="https://fakeimg.pl/150x100/?text=Hello" />
<img src="https://fakeimg.pl/150x115/?text=Hello" />
<img src="https://fakeimg.pl/150x90/?text=Hello" />
<img src="https://fakeimg.pl/150x100/?text=Hello" />
<img src="https://fakeimg.pl/150x120/?text=Hello" />
</div>
CSS:
DIV.group {
display:flex;
flex-flow:row wrap;
justify-content:space-between;
align-items:center;
align-content:stretch;
}
I will recommend you to use the display:flex, you just need to create an horizontal class and a vertical class an assign it to the divs of the image depending of the orientation you want to give it.
It's easy and simple, I write you the snippet, you just need to change the margins, and I also changed the image.
div.horizontal {
display: flex;
justify-content: center;
margin-bottom: 15px;
}
div.vertical {
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 15px;
}
<div class="row horizontal">
<div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div>
<div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div> <div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div> <div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div>
</div>
<div class="row horizontal">
<div class="col vertical">
<img class="center-block" width="150" src="imagery/5.png"/>
</div> <div class="col vertical">
<img class="center-block " width="150" src="imagery/6.png"/>
</div> <div class="col vertical">
<img class="center-block" width="150" src="imagery/7.png"/>
</div> <div class="col vertical">
<img class="center-block" width="150" src="imagery/8.png"/>
</div>
</div>
Hope it helps you.
don't know about bootstrap but if you use normal CSS
apply this class to the child container
position: absolute,
margin: auto,
top: 0,
right: 0,
bottom: 0,
left: 0,
i made a gallery using bootstrap4 grids, each 6 images is a row, if one of the 6 images is taller than the others, The entire row's images become taller too, And i want to set a fixed size row so images just resize at its size, i use css
height: 100%; width 100%;
to make it fill the size of row because if i didn't all images will stat at its real height and width and become mass.
<body>
<div class="container">
<div class="row no-gutters">
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="tall-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</body>
you can add custom css
.img-fluid{ max-width:100%; max-height:100px; }
I would probably just add a CSS class to the images, last thing you want is a image getting uploaded and covering pretty much whole your site.
img.img-fluid {
height: 250px;
}
I have been attempting to replicate Quora's design in Bootstrap when I encountered following problem. On every question page of Quora, say this one, there is a left sidebar. So for the first section (titled 'Want Answers'), I have a following structure:
<div class="col-lg-2">
<div id="left-sidebar">
<div id="want-answers">
<p><small>18 WANT ANSWERS</small></p>
<hr>
<div class="row">
<div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
<div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
<div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
<div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
</div>
<div class="row">
<div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
<div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
<div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
<div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
</div>
</div>
<!-- /#want-answers -->
Left sidebar is 2 columns wide. Now, as the image displays, each row (horizontal highlighting) extends want-answers div (vertical blue highlighting). Why is so? Shouldn't row encompass the full width of encompassing col-lg-2 div?
I'm not sure if this is a problem but try closing out your image tags like this: <img src="img/350x350.gif}" alt="" width="32px" height="32px"/>
in your code there is no trailing slash.
A large portion of achieving what you are looking for will have to do with overriding default padding and margins that bootstrap applies to rows and or columns. I was able to contain the images and center them with the following modifications:
DEMO
CSS:
#left-sidebar {
text-align:center;
background:#ccc;
}
.min-width {
min-width:153px;
}
#want-answers {
background:#f1f1f1;
min-width:153px;
width:100%;
text-align:center;
}
.no-marg-pad {
padding:0;
margin:0;
}
.img-line {
background:#000;
width:100%;
min-width:153px;
}
.img-padding {
padding:0;
margin-bottom:10px;
}
HTML
<div id="left-sidebar" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 no-marg-pad min-width">
<div class="row no-marg-pad">
<div id="want-answers" class="col-xs-12">
<p><small>18 WANT ANSWERS</small></p>
</div>
</div>
<div class="row no-marg-pad">
<div class="img-line">
<div class="col-xs-3 img-padding">
<img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
</div>
<div class="col-xs-3 img-padding">
<img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
</div>
<div class="col-xs-3 img-padding">
<img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
</div>
<div class="col-xs-3 img-padding">
<img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
</div>
</div>
</div>
<div class="row no-marg-pad">
<div class="img-line">
<div class="col-xs-3 img-padding">
<img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
</div>
<div class="col-xs-3 img-padding">
<img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
</div>
<div class="col-xs-3 img-padding">
<img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
</div>
<div class="col-xs-3 img-padding">
<img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
</div>
</div>
One other thing you may want to look at is defining the column width for small and medium size screens as well e.g. col-sm-2 col-md-2
I'm not sure if you have any custom CSS for #want-answers or #left-sidebar, but one problem is that 4-32px images would usually extend beyond the width of the col-lg-2. Change them to img-responsive so they shrink as needed..
<div class="col-lg-3">
<img src="//placehold.it/350" alt="" width="32px" height="32px" class="img-responsive">
</div>
http://codeply.com/go/OtSvmYQfcX
I have 3 images within a row. Between each column, i'd like to add an arrow pointing to the next image.
How can I do this, while keep the existing images centered (so the middle one is in the middle of the page), and so it degrades nicely on smaller screens (disappears for instance)?
html:
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<h1 class="col-sm-12" style="text-align: center;">EASY TO USE</h1>
<hr>
</div>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-3">
<img class="img" src="../assets/img/indevice/step1htc.mini.24.png" height="350px" width="240px" alt="">
</div>
<div class="img col-sm-1"><img class="img" src="../assets/img/arrow.png" alt=""></div>
<div class="col-sm-3">
<img class="img" src="../assets/img/indevice/step2htc.mini.24.png" height="350px" width="240px" alt="">
</div>
<div class="img col-sm-1"><img class="img" src="../assets//img/arrow.png" alt=""></div>
<div class="col-sm-3">
<img class="img" src="../assets/img/indevice/step3htc.mini.24.png" height="350px" width="240px" alt="">
</div>
</div>
</div>
</body>
</html>
EDIT: For clarification, I want to add arrows between the existing images in the html code above. The html/css above is already centered. Howver, i'd like to add 2 arrows between the 3 existing images.
EDIT: Please see this image to understand what I mean: http://imgur.com/YT2hnw4
EDIT: Changed html to show a full example, including css call.
Here you go
<div class="container">
<div class="row">
<h1 class="centered" style="text-align: center;">EASY TO USE</h1>
<hr>
<div class="col-md-3" style="margin-left:4.17%;">
<img class="img" src="image" height="350px" width="240px" alt="">
</div>
<div class="img col-md-1">
<img class="img" src="../assets/img/arrow.png" alt="">
</div>
<div class="col-md-3">
<img class="img" src="image" height="350px" width="240px" alt="">
</div>
<div class="img col-md-1">
<img class="img" src="../assets//img/arrow.png" alt="">
</div>
<div class="col-md-3">
<img class="img" src="image" height="350px" width="240px" alt="">
</div>
</div>
</div>
All i did is removed the extra col-md-1 class and instead added the margin of the same equivalance to the 1st element so that it stay in the center.