I am building my own website with Dreamweaver. I have an portfolio page with an gallery which I used from this tutorial: http://www.webdesigntunes.com/coding/jquery-filterable-portfolio/#comment-16950
The images from the tutorial are smaller but I want them bigger like: 324 by 322 px.
Also they make a columm of 4 images next to each other and I want to have 3 to each other.
But when I try that, my images don't go perfectly next to each other.
Here is what I have:
<div class="portfolio">
<article class="entry video">
<a data-rel="prettyPhoto" href="#">
<img class="top" src="images/knop-1.jpg" alt="">
<span class="magnifier"></span>
</a>
</article>
(this article div repeats for every new image)
Some of the CSS:
.portfolio {
width: 960px;
height:auto;
overflow: hidden;
position: relative;
margin:15px;
}
.magnifier {
background:url(images/knop-hover1.jpg) no-repeat center;
width:324px;
height:322px;
position:absolute;
top:10px;
left:10px;
bottom:10px;
right:10px;
opacity:0;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-ms-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}
img.top {
position:absolute;
left:0;
right:5px;
}
I hope you guys can help me out.
Thanks!
It looks like you're missing the JQuery from the tutorial. You'll need to add that before it all works like the demo. I notice you're missing a closing /div tag and your img tag should close itself at the end like this: /> instead of just >.
If you want three images instead of four you can make them auto center by applying a width to a surrounding div that encompasses the individual images. Then that surrounding div needs to be inside a larger content div or main div. The main div will have a set width, floated left. Then you can set margin:0 auto; for the surrounding div and it will center everything. You can add some margin to the single image divs to give them some breathing room, too. I made a code snippet so you can see visually what I mean.
.main {
width: 700px;
float: left;
display: block;
background: pink;
}
.surrounding {
width: 510px;
display: block;
margin: 0px auto;
}
.single {
width: 150px;
float: left;
margin: 10px;
}
.single img {
width: 150px;
height: 150px;
}
<div class="main">
<div class="surrounding">
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
</div>
<div class="surrounding">
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
</div>
</div>
An observation, though. 3 images at 324px width are going to be at least 976px when side by side. That is larger than the width you've set for your page. Maybe you're referring to their sized once clicked?
Related
do you know how to separate two images in the same row?
Thank you so much for your help.
I will post the image under this sentence.
Image
<div id="portfolio">
<div class="container-fluid w-75">
<div class="row">
<div class="col-sm-6 col-xs-12 text-center">
<div class="zgrade">
<img class="img-fluid" src="assets/img/szgrade/zgradaA.jpg" alt="..." />
<h2 class="zgrade-txt" style="color:white"> Zgrada A </h2>
</div>
</div>
<div class="col-sm-6 col-xs-12 text-center">
<div class="zgrade">
<img class="img-fluid" src="assets/img/szgrade/zgradaB.jpg" alt="..." />
<h2 class="zgrade-txt" style="color:white"> Zgrada B </h2>
</div>
</div>
</div>
</div>
</div>
Css
.zgrade {
position: relative;
border: 1px solid #333;
overflow: hidden;
width: 745px;
}
.zgradeimg {
width: 500px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.4s ease-in-out;
}
.zgrade:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.zgrade-txt {
position: absolute;
top: 250px;
left: 0;
width: 100%;
Edit: Added CSS code, I tried adding br and span in HTML code.
We could use simple css to add a margin to the element. This would create empty space between the elements.
Add this to your external stylesheet or in your html file(best place is head):
<style>
.img-fluid {
margin-right: 20px; /*feel free to change this to any amount*/
}
</style>
or
style="margin-right:20px"
Margin is space outside of an element, which mostly acts like white space. It is counted in the element size but it is outside the border and background color does not effect it.
I solved the problem, I increased w of the container from 75 to 80, but I needed to add a new class in CSS (that would be w-80).
I can change a image when the mouse is hovered over it but how do I change the image when the mouse is hovered over the layer/div?
<div id="layerservicewebsite">
<a href="website%20design.html">
<br>
<img src="Images/symbol%20web%20design2.jpg" onmouseover="this.src='Images/symbol%20web%20design.jpg'" onmouseout="this.src='Images/symbol%20web%20design2.jpg'" width="200" height="200"> </a>
<h2>WEBSITE DESIGN</h2>
I would create 2 images and give one a class. Then create a CSS rule for your parent div which makes the default image transparent on hover. This has the advantage of being able to transition the two images, fading them in and out.
First, define a class rule for a general image:
#layerservicewebsite > img {
position: absolute;
display: block;
opacity: 1;
transition: opacity 1s ease;
/* set your left, top, width, height etc here... */
}
Then give the image that you want to disappear some class - canHide for example.
Then:
#layerservicewebsite:hover > img.canHide {
opacity: 0;
}
You can use the following CSS for that:
#layerservicewebsite:hover img {
background-image: url('image.png');
}
Snippet below:
#layerservicewebsite:hover img {
background-image: url('https://placeholdit.imgix.net/~text?txtsize=28&bg=0099ff&txtclr=ffffff&txt=300×300&w=300&h=300&fm=png');
}
#layerservicewebsite {
border: 1px solid lightgray;
}
<div id="layerservicewebsite">
<a href="website%20design.html">
<img src="Images/symbol%20web%20design2.jpg" onmouseover="this.src='Images/symbol%20web%20design.jpg'" onmouseout="this.src='Images/symbol%20web%20design2.jpg'" width="200" height="200">
</a>
<h2>WEBSITE DESIGN</h2>
</div>
A solution without javascript:
.layer {
padding: 50px;
background: #eee;
}
.layer img:last-child {
display: none;
}
.layer:hover img {
display: none;
}
.layer:hover img:last-child {
display: inline-block;
}
<div class="layer">
<a href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Image%20One&w=350&h=150" alt="">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Image%20Two&w=350&h=150" alt="">
</a>
<h2>WEBSITE DESIGN</h2>
</div>
I am using bootstrap to add responsive images to my webpage. The problem is that I have several overlapping images which then don’t get rescaled correctly.
Diagram Example
Not sure if I’ve set something up wrong, am missing something or trying to over-reach beyond what bootstrap can do.
This is the test code I’m using, I’ve kept it generic.
HTML:
<div class="col-lg-12" >
<!-- Images inside the container image that are not being rescaled -->
<div class="children_Images">
<img class="img-responsive" id="image_1" src="insideImage_1.png" alt="" style="left: 0.6em; top: -0.5em"/>
<img class="img-responsive" id="image_2" src="insideImage_2.png" alt="" style="left: 0.6em; top: -0.5em"/>
<img class="img-responsive" id="image_3" src="insideImage_3.png" alt="" style="left: 0.6em; top: -0.5em"/>
</div>
</div>
CSS:
.container{
border: 2px solid red;
position: relative; /* Allows children to be placed relative to the panel */
font-size: 10px;
z-index: 0;
height: 100%;
width: 100%;
}
.container img{
max-width:100%;
width: auto;
position: absolute;
border:5px solid green;
}
.children_Images
{
transition: all 1s ease-in-out;
}
.children_Images:hover
{
transform: scale(1.05) translate(4em);
}
I’m just wondering if this is possible with CSS and Bootstrap or should I be doing something with JavaScript that rescales all the children images once the parent image’s size has been altered?
What you should do is this
<div class="container">
<div class="col-xs-4">
<img src="" alt="" />
</div>
<div class="col-xs-4">
<img src="" alt="" />
</div>
<div class="col-xs-4">
<img src="" alt="" />
</div>
</div>
And css
.container img {
max-width: 100%;
}
My problem is that I want the logo and ΛΟΓΙΣΜΙΚΟ menu to be aligned.
I've tried everything and I can't make them move together. The menus move a lot faster...
I'm trying with javascript to get the positions and set the logo to move with the same position as the menu but I can't figure it out here is the page http://www.altasoft.gr/index_.htm
<div class="header">
<div style="position:relative;top:10px; z-index:99; width:50%"><img src="images/Altasoft_Logo.png" alt="" width="354" height="91" /></div>
<div style="position:relative; left:10%; top:-30px; z-index:5; width:80%; min-width:550px;"> <img style="float:right;" src="images/telephone.gif" alt="" width="142" height="16" /></div>
</div>
.nav-container {
background: #eaeaeb;
/*background: #fff url(../images/menu_bg.gif) no-repeat 50% 0%;*/
clear: both;
height: 48px;
}
#nav {
/*padding: 0px 0px 0px 30px;*/
width: 931px/*920px*/;
}
#nav li {
padding-right: 8px;
margin-top: 10px;
padding-bottom: 10px;
text-decoration: none;
}
<div class="header">
<div style="left: 17%;
top: 10px;
z-index: 99;
width: 859px;
margin: auto;"><img width="354" height="91" alt="" src="images/Altasoft_Logo.png"></div>
<div style="position:relative; left:10%; top:-30px; z-index:5; width:80%; min-width:550px;"> <img width="142" height="16" alt="" src="images/telephone.gif" style="float:right;"></div>
</div>
hey actually you should follow the mentioned below code i hope this will work for you please change your header DIV code with my code :-
HTML
<div class="header">
<div style="margin: auto; width: 931px;"><img width="354" height="91" alt="" src="images/Altasoft_Logo.png"></div>
<div style="position:relative; left:10%; top:-30px; z-index:5; width:80%; min-width:550px;"> <img width="142" height="16" alt="" src="images/telephone.gif" style="float:right;"></div>
</div>
U have to remove the position property from your logo div and its position values top & left and just define the width:931px; with margin:auto and its working fine as per your requirement....
Just change the width of the #nav
Screenshot:
I am trying to make a image gallery similar to one in anntaylor site.
I am able to change the main image on mouse hovering by changing the source of image.
Here is the code I applied:
<div id="navimage1"><img src="p1.png" name="p1" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p1.png'" onLoad="qwe();"/></div>
<div id="navimage2"><img src="p2.png" name="p2" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p2.png'" onLoad="qwe();"/></div>
<div id="navimage3"><img src="p3.png" name="p3" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p3.png'" onLoad="qwe();"/></div>
<div id="navimage4"><img src="p4.png" name="p4" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p4.png'" onLoad="qwe();"/></div>
<div id="viewpoint"><img src="p1.png" name="mainimage" alt="" /></div>
The CSS for the above code is :
#viewpoint { top: 180px; width: 60%; left:30%; right:0; height: 720px; position: absolute;}
#navimage1 { left:10%; width:20%; height:180px; top: 180px; position: absolute;}
#navimage1:hover {background-color: #6d6767;}
#navimage2 { left:10%; width:20%; height:180px; top: 360px; position: absolute;}
#navimage2:hover {background-color: #6d6767;}
#navimage3 { left:10%; width:20%; height:180px; top: 540px; position: absolute;}
#navimage3:hover {background-color: #6d6767;}
#navimage4 { left:10%; width:20%; height:180px; top: 720px; position: absolute;}
#navimage4:hover {background-color: #6d6767;}
The problem is on changing the image I am not able to get the fading effect.
Please provide with a suitable JavaScript code to get the fading effect.
Not going to go into details too far.. but doing a similar project and here's how I handled it...
<div id="slides">
...
<img src="..." class="trans prev" data-id="image1" />
<img src="..." class="trans shown current" data-id="image2" />
<img src="..." class="trans next" data-id="image3" />
...
</div>
Then in CSS, I use CSS3 transitions, where the .trans class is opacity of 0, and a z-index of 100, where .trans.shown is set to opacity 1 with a z-index of 200.
Javascript is used to pull the current image, remove the "shown" class, and update the classes as appropriate... .prev and .next set the left position to -100% and 100% respectively.
I also only maintain the current, prev and next images in the stack.. other images are removed from the DOM... this keeps things pretty light/fast. Combined with the jquery.swipe plugin for tablet support. Would show the link to the final product, but will not be up until next month.
jQuery fadeIn - http://api.jquery.com/fadeIn/
jQuery with the fadeIn (http://api.jquery.com/fadeIn/) and fadeOut methods (http://api.jquery.com/fadeOut/) should work for you