On my website I'm trying to create a popup of an hovered image so that when the user moves his mouse on the image, the image should appear in a popup in its original size size next to the mouse... something like the HooverZoom+ plugin for browsers...
Now my code kinda almost works... it shows the image in an popup but it centers it in the middle of the screen... how would could I make it so it shows it on the left or the right side of the mouse?
Im also usign Bootstrap for layout of the images
Here is my code and JSFiddle:
HTML:
<div id="page-content-wrapper">
<div class="container dodatki pb-5">
<div class="row text-center">
<div class="col-12 col-md-4 col-lg-4 popup"><img src="https://www.urbanconcepts.ph/wp/wp-content/uploads/2016/07/BR7130-watson-wardrobe-whitebg.jpg" class="img-fluid fr-fic fr-dii" alt="Poševni vrh omare">
<p class="dodatki-desc">Poševni vrh omare</p>
</div>
<div class="col-12 col-md-4 col-lg-4 popup"><img src="https://www.urbanconcepts.ph/wp/wp-content/uploads/2016/07/BR7130-watson-wardrobe-whitebg.jpg" class="img-fluid fr-fic fr-dii" alt="Kovinski podstavek omare">
<p class="dodatki-desc">Kovinski podstavek omare</p>
</div>
<div class="col-12 col-md-4 col-lg-4 popup"><img src="https://www.urbanconcepts.ph/wp/wp-content/uploads/2016/07/BR7130-watson-wardrobe-whitebg.jpg" class="img-fluid fr-fic fr-dii" alt="Sedežni podstavek omare">
<p class="dodatki-desc">Sedežni podstavek</p>
</div>
</div>
<div class="row text-center">
<div class="col-12 col-md-4 col-lg-4 popup"><img src="https://www.urbanconcepts.ph/wp/wp-content/uploads/2016/07/BR7130-watson-wardrobe-whitebg.jpg" class="img-fluid fr-fic fr-dii" alt="Kovinski podstavek brez nogice">
<p class="dodatki-desc">Kovinski podstavek brez nogice</p>
</div>
<div class="col-12 col-md-4 col-lg-4 popup"><img src="https://www.urbanconcepts.ph/wp/wp-content/uploads/2016/07/BR7130-watson-wardrobe-whitebg.jpg" class="img-fluid fr-fic fr-dii" alt="Kovinski podstavek z nastavljivo nogico">
<p class="dodatki-desc">Kovinski podstavek z regulirno nogico</p>
</div>
<div class="col-12 col-md-4 col-lg-4 popup"><img src="https://www.urbanconcepts.ph/wp/wp-content/uploads/2016/07/BR7130-watson-wardrobe-whitebg.jpg" class="img-fluid fr-fic fr-dii" alt="Viseča pregradna stena">
<p class="dodatki-desc">Viseča pregradna stena</p>
</div>
</div>
<div class="row text-center">
<div class="col-12 col-md-4 col-lg-4 popup"><img src="https://www.urbanconcepts.ph/wp/wp-content/uploads/2016/07/BR7130-watson-wardrobe-whitebg.jpg" class="img-fluid fr-fic fr-dii" alt="PVC etiketni okvir">
<p class="dodatki-desc">PVC etiketni okvir</p>
</div>
<div class="col-12 col-md-4 col-lg-4 popup"><img src="https://www.urbanconcepts.ph/wp/wp-content/uploads/2016/07/BR7130-watson-wardrobe-whitebg.jpg" class="img-fluid fr-fic fr-dii" alt="Obesna kljukica za v omaro">
<p class="dodatki-desc">Obesna kljukica</p>
</div>
<div class="col-12 col-md-4 col-lg-4 popup"><img src="https://www.urbanconcepts.ph/wp/wp-content/uploads/2016/07/BR7130-watson-wardrobe-whitebg.jpg" class="img-fluid fr-fic fr-dii" alt="PVC pladenj za čevlje">
<p class="dodatki-desc">PVC pladenj za čevlje</p>
</div>
</div>
</div>
</div>
SCSS:
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
overflow-x: hidden;
height: 100%;
}
body {
margin: 0;
font-size: 16px;
line-height: 1.428571429;
padding: 0;
height: 100%;
font-family: 'Montserrat', sans-serif;
}
#page-content-wrapper {
width: 100%;
position: absolute;
}
.dodatki {
img {
height: 10rem;
transition: all .2s ease-in-out;
&:hover {
transform: scale(1.4);
}
}
.dodatki-desc {
margin-top: 16px;
margin-bottom: 10px;
font-size: 0.8125rem;
color: #666666;
}
}
.show {
z-index: 999;
display: none;
.img-show {
width: 650px;
height: 650px;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
overflow: hidden;
-webkit-box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -7px rgba(0,0,0,0.2);
box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -7px rgba(0,0,0,0.2);
img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
}
}
JS:
$(document).ready(function() {
"use strict";
$(".popup img").mouseover(function () {
var $src = $(this).attr("src");
$(".show").fadeIn();
$(".img-show img").attr("src", $src);
});
$(".popup, .img-show").mouseleave(function () {
$(".show").fadeOut();
});
});
JS Fiddle
Thanks for your help in advance
For displaying images next to cursor you can use this one jQuery method
$(document).mousemove();
Example:
$(document).mousemove(function(e) {
$('.logo').offset({
left: e.pageX,
top: e.pageY + 20
});
});
See this fiddle for the working one https://jsfiddle.net/q1xc7vbg/
Cheers
For hover-zoom take a look here.
I hope i got you right now. When the mouse hovers the image (mouseover-event), you have to create and append a new element containing the image to the body. This should not be positioned over the original image in order to not trigger the mouseleave event immediately. Later on, when the user moves his mouse out of the small image, you can delete/remove the created element when the mouseleave-event triggers.
I would recommend to use an absolute positioning on the big-image element.
Related
I am creating a slider using HTML, javascript, and CSS.
The problem I have it showing only the first two images (li) and not sliding to the other (li) elements.
I have the code of HTML as following:
<section id="cliens" class="cliens section-bg">
<div class="container">
<ul id="slider">
<li>
<div class="row" data-aos="zoom-in">
<div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center">
<img src="assets/img/clients/client-1.png" class="img-fluid" alt="">
</div>
<div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center">
<img src="assets/img/clients/client-2.png" class="img-fluid" alt="">
</div>
</div>
</li>
<li>
<div class="row" data-aos="zoom-in">
<div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center">
<img src="assets/img/clients/client-1.png" class="img-fluid" alt="">
</div>
<div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center">
<img src="assets/img/clients/client-2.png" class="img-fluid" alt="">
</div>
</div>
</li>
<li>
<div class="row" data-aos="zoom-in">
<div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center">
<img src="assets/img/clients/client-1.png" class="img-fluid" alt="">
</div>
<div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center">
<img src="assets/img/clients/client-2.png" class="img-fluid" alt="">
</div>
</div>
</li>
</ul>
</div>
</section>
and the javascript code as following:
<script>
// Slide every slideDelay seconds
const slideDelay = 5000;
const dynamicSlider = document.getElementById("slider").value;
var curSlide = 0;
window.setInterval(()=>{
curSlide++;
if (curSlide === dynamicSlider.childElementCount) {
curSlide = 0;
}
// Actual slide
dynamicSlider.firstElementChild.style.setProperty("margin-left", "-" + curSlide + "00%");
}, slideDelay);
</script>
and the CSS as following:
<style>
#slider {
width: 100%;
height: 100%;
margin: 0 auto;
border: 10px solid transparent;
padding: 0px;
z-index: 100;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
}
#slider > li {
width: 100%;
height: 100%;
position: relative;
display: inline-block;
overflow: hidden;
font-size: 15px;
font-size: initial;
line-height: normal;
transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1); /* Slide css animation */
background-size: cover;
vertical-align: top;
box-sizing: border-box;
white-space: normal;
}
</style>
1: You are trying to get the value of slider but slider does not have any value.
2: You are trying to define a non css value in line 14 (margin-left -000% are trying to do what?)
3: I think you missed up some lines of code, cause this code even runs...
I know what you want to do, but you need to specify a higher z-index for ul and lowers for li then make a "animation" with the li changing its positions.
I made a very simple slider without any animation, you can use it in your code if you want.
<!DOCTYPE html>
<html>
<head>
<style>
#img
{
transition: linear 2s;
width: 500px;
height: 500px;
}
</style>
<title>Page Title</title>
</head>
<body>
<img src="https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8Zm9yZXN0fGVufDB8fDB8&auto=format&fit=crop&w=600&q=60" id="img">
<script>
var counter = 0;
var t;
window.onload = function() {setInterval(change, 5000);}
function change()
{
var imgs = ['https://images.unsplash.com/photo-1473448912268-2022ce9509d8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1025&q=80', 'https://images.unsplash.com/photo-1519821172144-4f87d85de2a1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1231&q=80', 'https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8Zm9yZXN0fGVufDB8fDB8&auto=format&fit=crop&w=600&q=60'];
if(counter === 3)
{ counter = 0; }
else
{
document.getElementById('img').src = imgs[0 + counter];
counter++;
}
}
</script>
</body>
</html>
If you fix these errors I can give you the entire answer.
Hope I helped!
I'm using bootstrap v4.
I have an image, I want it stretched (keeping its aspect ratio) to the full width of the page, will means the image/image container's height can change.
I also want a div on the top and bottom of the image.
Bootstrap has row align-items-start and row align-items-end which I used to try to make my divs go where I want, but it didn't seem to work.
I'm not sure if it is possible to overlay elements like how I want, due to the image/container div resizes. Possibly I need to use javascript for this.
HTML
<div class="outer container-fluid">
<img id="cats" class="img-fluid" src="http://placekitten.com/g/800/100">
<div class="myboxes container-fluid">
<div class="row align-items-start">
<div class="col-1 redbox">Top</div>
</div>
<div class="row align-items-end">
<div class="col-1 bluebox">Bottom</div>
</div>
</div>
</div>
CSS
.outer {
position: relative;
}
.redbox {
background: rgba(255, 0, 0, 1);
height: 20px;
}
.bluebox {
background: rgba(0, 0, 255, 1);
height: 20px;
}
.myboxes {
position: absolute;
z-index: 2;
}
#cats {
position: absolute;
z-index:1;
}
Not working fiddle
Image of what I want
.outer {
position: relative;
}
.redbox {
background: rgba(255, 0, 0, 1);
height: 20px;
}
.bluebox {
background: rgba(0, 0, 255, 1);
height: 20px;
}
#topBox, #bottomBox {
position:absolute;
left:0
}
.img-fluid {
width:100%;
display: block;
}
#topBox {
top:0
}
#bottomBox {
bottom:0
}
<div class="outer container-fluid">
<img id="cats" class="img-fluid" src="http://placekitten.com/g/800/100" />
<div id="topBox" class="row align-items-start">
<div class="col-1 redbox">Top</div>
</div>
<div id="bottomBox" class="row align-items-end">
<div class="col-1 bluebox">Bottom</div>
</div>
</div>
.container {
width:100%;
position:relative;
padding:0px;
}
.img-fluid {
width:100%;
}
.box {
position:absolute;
left:0px;
height: 20px;
}
.top {
top:0px;
background: red;
}
.bottom {
bottom:5px;
background: blue;
}
<div class="container">
<div class="box top">TOP</div>
<div class="box bottom">BOTTOM</div>
<img id="cats" class="img-fluid" src="http://placekitten.com/g/800/100"/>
</div>
It's very much possible to overlay element like you want to and fairly easy too. You don't even need so many classes and div's for doing so.
I am trying to creating responsive 3 boxed layout zoom in/zoom out on mouseover, but can't.
Example: https://www.americaneagle.com/
In American eagle website homepage slideshow below we can find above examples.
Please suggest any example or links.
For starters you could try like this.. But do not expect someone else to write your code..
Try yourself first and then ask for specific doubts and clarifications here. :)
* {
box-sizing: border-box;
}
body {
margin-top: 100px;
}
.grid:after,
.grid:before {
display: 'table' content:'';
}
.col {
float: left;
width: 33%;
padding: 0px 10px;
}
.block {
background-color: #eee;
border: 1px solid #ddd;
transform: scale(1);
transition: all 0.3s ease;
height: 200px;
z-index: 1;
position: relative;
}
.block:hover {
transform: scale(1.5);
z-index: 10;
}
.block-hidden {
display: none;
text-align: center;
padding: 20px;
}
.block:hover .block-hidden {
display: block;
}
<div class="grid">
<div class="col">
<div class="block">
<div class="block-hidden">
Hidden Content
</div>
</div>
</div>
<div class="col">
<div class="block">
<div class="block-hidden">
Hidden Content
</div>
</div>
</div>
<div class="col">
<div class="block">
<div class="block-hidden">
Hidden Content
</div>
</div>
</div>
</div>
each box you can use bootstrap col for responsive
col-lg-4 col-md-4 col-sm-4 col-xs-12
or
col-lg-4 col-md-4 col-sm-6 col-xs-12
Simply i attached the required output image.w ithin the braces, i need a textviews..
i tried with below code:
<div class="col-sm-12 col-md-8 offset-md-2 col-lg-6 offset-lg-3 nopadding">
<div class="card weather" widget="">
<div class="card-header">
<span class="heading">Criminal Records</span>
<div class="widget-controls">
<button class="btn btn-info btn-rounded btn-xs" type="button" routerLink="/overview">
<i class="fa fa-arrow-left"></i> Back</button>
</div>
</div>
<search-details [searchDetails]='details'></search-details>
<div class="card bottom-15">
<div class="card-block text_yellow searchfont">{{data.length ? data.length : ''}} Possible Criminal
<span *ngIf="data.length == 1">Record</span>
<span *ngIf="data.length > 1">Records</span>
</div>
<div class="row">
<span class="text-overflow">IMPORTANT: Due to varying quality of source data, records displayed may not pertain to your subject. Independent
verification is highly recommended. Criminal record results in FOREWARN may be limited due to strict
matching logic. Additional records may exist that fall outside FOREWARN's strict matching process.</span>
<button class="btn btn-info btn-rounded btn-xs criminal-info-button" (click)="openCriminalImportantNote()" type="button">More</button>
</div>
</div>
<div>
<div class="card-block widget-body buttons">
<div class="row" *ngFor="let record of data; let i = index">
<div class="col-sm-12 bottom-15">
<div class="card text_yellow">
<div class="card-block">
Record: {{i+1}}
<p class="propname">Source: {{ record.sourceName }}</p>
<div class="row">
<div class="col-sm-9">
<div *ngIf="record.offenseDate" class="row">
<label class="col-5 col-sm-4 text-truncate text-gray">Offense Date: </label>
<div class="col-7 col-sm-7">{{ record.offenseDate }}</div>
</div>
<div *ngIf="record.chargesFiledDate " class="row">
<label class="col-5 col-sm-4 text-truncate text-gray">Charges Filed Date: </label>
<div class="col-7 col-sm-7">{{ record.chargesFiledDate }}</div>
</div>
<div *ngIf="record.convictionDate" class="row">
<label class="col-5 col-sm-4 text-truncate text-gray">Conviction Date: </label>
<div class="col-7 col-sm-7">{{ record.convictionDate }}</div>
</div>
<div class="row">
<label class="col-5 col-sm-4 text-truncate text-gray">Case Type: </label>
<div class="col-7 col-sm-7">{{ record.caseType }}</div>
<label class="col-5 col-sm-4 text-truncate text-gray">Description: </label>
<div class="col-7 col-sm-7">{{ record.description }}</div>
<label class="col-5 col-sm-4 text-truncate text-gray">Disposition: </label>
<div class="col-7 col-sm-7">{{ record.disposition }}</div>
</div>
</div>
<div class="col-sm-3">
<p>
<b>
<u>Match Key</u>
</b>
</p>
<div class="row">
<label class="col-9 col-sm-6">FirstName: </label>
<div *ngIf="record.matchKeys && record.matchKeys.firstName" class="col-3 col-sm-6 color-green">✓
</div>
</div>
<div class="row">
<label class="col-9 col-sm-6">LastName: </label>
<div *ngIf="record.matchKeys && record.matchKeys.lastName" class="col-3 col-sm-6 color-green">✓
</div>
</div>
<div class="row">
<label class="col-9 col-sm-6">MInitial: </label>
<div *ngIf="record.matchKeys && record.matchKeys.mInitial" class="col-3 col-sm-6 color-green">✓
</div>
</div>
<div class="row">
<label class="col-9 col-sm-6">BirthDate: </label>
<div *ngIf="record.matchKeys && record.matchKeys.dob" class="col-3 col-sm-6 color-green">✓
</div>
</div>
<div class="row">
<label class="col-9 col-sm-6">Address: </label>
<div *ngIf="record.matchKeys && record.matchKeys.address" class="col-3 col-sm-6 color-green">✓
</div>
</div>
<div class="row">
<label class="col-9 col-sm-6">State: </label>
<div *ngIf="record.matchKeys && record.matchKeys.state" class="col-3 col-sm-6 color-green">✓
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Im trying to add vertical lines with curved at corners in html but i dont have any idea how to add vertical lines in html with curved shape at corners. so can any one help me to solve this.
Please can any one help me to solve this.
You could use borders and border-radius to achieve what you want, adjust border-radius to fit your needs, code will be like follow:
div {
width: 70px;
padding: 10px 15px;
border-right: 1px solid #333;
border-left: 1px solid #333;
border-radius: 25px;
}
<div>
Some text Some text Some text Some text Some text
</div>
Two ways:
Method #1: borders on containing element & "block-out" pseudo-elements
This method uses pseudo-elements to "block-out" the containing element's top and bottom borders.
body {
background: gold;
}
.containing {
border: 1px solid;
width: 200px;
height: 300px;
border-radius: 20px;
background: gold;
position: relative;
}
.containing:before {
content: "";
width: 80%;
height: 1px;
position: absolute;
left: 0;
right: 0;
top: -1px;
margin: auto;
background: gold;
z-index: 1;
}
.containing:after {
content: "";
width: 80%;
height: 1px;
position: absolute;
left: 0;
right: 0;
bottom: -1px;
margin: auto;
background: gold;
z-index: 1;
}
<div class="containing"></div>
Method #2: borders on pseudo-elements
This method also uses pseudo-elements but to draw the borders themselves allowing transparent gaps to the top and bottom of the containing elements; which will be useful if you need these elements to behave as intended against any background-color.
body {
background: white; /* to demonstrate transparent background */
}
.containing {
width: 200px;
height: 300px;
border-radius: 20px;
background: gold;
position: relative;
}
.containing:before {
content: "";
position: absolute;
width: 30px;
left: 0;
bottom: 0;
top: 0;
margin: auto;
background: transparent;
z-index: 1;
border: 1px solid;
border-right: 0;
border-bottom-left-radius: 20px;
border-top-left-radius: 20px;
}
.containing:after {
content: "";
position: absolute;
width: 30px;
right: 0;
bottom: 0;
top: 0;
margin: auto;
background: transparent;
z-index: 1;
border: 1px solid;
border-left: 0;
border-bottom-right-radius: 20px;
border-top-right-radius: 20px;
}
<div class="containing"></div>
as everyone here mentions already, border and border-radius is what you are looking for.
border-left: 1px solid black;
border-right: 1px solid black;
border-radius: 20px;
here is a simple fiddle to demonstrate: https://jsfiddle.net/suvartheec/obhL9aca/
I have tried to get both an iPad and iPhone to work with my current pen and it seems that I can't get it. I have tried to use and SomeContent as well as the normal . The will simply not scroll down to the div. I've tried to cut out the javascript, bootstrap, css, and even cut the page down to rudementary html for awhile but none of the tests seemed to fix it.
Included in the file are Bootstrap.js, Jquery.min.js, Bootstrap.min.css, and font-awesome.min.css
You can find the pen here: Gregory Buhler Portfolio
HTML:
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand topnav" href="http://GregoryBuhler.com" target="_blank">Gregory Buhler</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div id="home" class="text-center">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="homecontent">
<h1>Gregory Buhler Website Design</h1>
<h3>Always on the fantastic side of life</h3>
</div>
<!-- End .homecontent -->
</div>
<!-- End .col-lg-12 -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</div>
<!-- End #home -->
<div id="about">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 col-md-offset-2 text-background">
<h4>A Bit About Me</h4>
<p>When I was a kid my dad pushed for my brother and I to learn computers. I took to it like a fish to water. From 8 onwards my summers were spent indoors working away on simple scripting languages and later on some game modifications.</p>
<p>I won't lie, it wasn't easy getting past my <em>"it needs to be perfect all the time"</em> streak. In fact I still have that streak, I've just learned to fix and perfect as you go instead of making it perfect on the first go-round.</p>
<p>I absolutely love a challenge, critisism of my work used to cause me to clam up a bit. Over time I learned to take the constructive side of critisism and use it to better myself and the content I produce.</p>
<p>None of this would be possible without my amazing wife who puts up with my nose being buried in a book or in code for hours at a time every day. I want to provide the best life I can for her, and I'm good at tech and I love tech, this
is how I plan to provide for her the rest of our lives.</p>
</div>
<!-- End .com-sm-12 .col-md-4 .com-md-offset-2 .text-background -->
<div class="col-md-4 col-md-offset-1 text-center">
<img class="img-circle vertical-align" src="http://i66.tinypic.com/2ywz3w5.jpg" alt="Gregory Buhler in his black cowboy hat.">
</div>
<!-- end .col-md-4 .col-md-offset-1 .text-center -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</div>
<!-- End #about -->
<div id="portfolio">
<div class="portfoliocontent text-center">
<div class="container">
<h1>Portfolio</h1>
<div class="row">
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="contact">
<div class="container">
<div class="row">
<div class="contactcontent text-center">
<div class="col-md-12">
<h1>Get ahold of me</h1>
<h3>Open Your Eyes to the Opportunities</h3>
</div>
<hr class="hor-big">
<div class="col-sm-12 col-md-2 col-md-offset-2">
<a href="https://www.facebook.com/GBProgramming" target="_blank" class="btn-inverse"><i class="fa fa-facebook"></i> Facebook
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://twitter.com/gregoryBuhler" target="_blank" class="btn-inverse"><i class="fa fa-twitter"></i> Twitter
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://github.com/Gregory-Buhler" target="_blank" class="btn-inverse"><i class="fa fa-github"></i> Github
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://www.linkedin.com/in/gregorybuhler" target="_blank" class="btn-inverse"><i class="fa fa-linkedin"></i> Linkedin
</a>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container text-center">
<p>© Website created by Gregory Buhler</p>
</div>
</footer>
</body>
CSS:
#about {
background: url(http://i63.tinypic.com/213ht14.jpg) 50% 0 no-repeat fixed;
background-size: cover;
padding-top: 10%;
padding-bottom: 10%;
font-size: 1.1em;
}
#about .text-background {
background: rgba(255, 255, 255, .3);
font-family: droid-serif;
color: rgb(30, 30, 30);
padding: 10px;
border-radius: 10px;
}
#about img {
padding: 20px;
}
#about,
#contact,
#home,
#portfolio {
overflow: hidden;
min-height: 900px;
}
a.btn-inverse {
position: relative;
display: inline-block;
margin-top: 10px;
width: auto;
transition: all .2s ease-in-out;
background-color: rgb(90, 90, 90);
border: rgb(60, 60, 60) 1px solid;
padding: 10px 15px;
border-radius: 5px;
color: white;
}
a.btn-inverse:hover {
background-color: rgb(0, 0, 0);
transform: scale(1.1);
text-decoration: none;
}
body {
padding-top: 50px;
}
#contact {
background: url(http://i63.tinypic.com/2rp9tau.jpg) 50% 0 no-repeat fixed;
background-size: cover;
}
.contactcontent {
padding-top: 25%;
padding-bottom: 25%;
}
footer {
padding-top: 10px;
}
h1,
h2,
h3 {
font-family: Cinzel;
text-shadow: 1px 1px 1px #000;
}
h1 {
font-size: 4em;
color: rgb(100, 100, 100);
}
h2 {
font-size: 3em;
}
h3 {
font-size: 2em;
color: rgb(150, 150, 150)
}
h4 {
font-size: 1.7em;
font-weight: 700;
}
#home {
background: url(http://i65.tinypic.com/vht1c2.jpg) 50% 0 no-repeat fixed;
background-size: cover;
}
.homecontent {
padding-top: 25%;
padding-bottom: 20%;
}
.hor-big {
clear: both;
border: 0;
height: 0;
box-shadow: 0 0 10px 1px black;
}
.hor-big:after {
content: "\00a0";
}
.imgholder {
margin: auto;
border-radius: 5px;
border: rgb(20, 20, 20) 1px solid;
background-color: rgb(250, 250, 250);
width: 190px;
height: 180px;
padding-top: 5px;
padding-left: 5px;
}
.imgholder img {
float: left;
}
.inset-shadow {
position: relative;
float: left;
}
.inset-shadow:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
}
#my-row {
display: table;
}
#my-row .content {
float: none;
display: table-cell;
vertical-align: middle;
}
.navbar {
margin-bottom: 0;
position: fixed;
}
.nav li:hover {
background-color: rgb(28, 28, 28);
}
#portfolio {
background: url(http://i67.tinypic.com/287nl8z.jpg) 50% 0 repeat fixed;
background-size: cover;
}
.portfoliocontent {
padding-top: 10%;
padding-bottom: 10%;
}
.portfoliocontent .row > div {
transform: all .4s ease-in-out;
margin-top: 10px;
}
JS:
$("nav ul li a[href^='#']").on('click', function(e) {
e.preventDefault();
// animate the scroll
y = $(this.hash).offset().top - 50;
if ((y - window.pageYOffset) > 0) {
time = y - window.pageYOffset;
} else {
time = window.pageYOffset - y;
}
$('html, body').animate({
scrollTop: y
}, time);
});
Any help would be greatly appreciated! Thank you!