I am trying to create a div that has a fading background image with another fixed image ontop of this. The svg image I am trying to add ontop of the doesn't stay fixed with the div, It also fades in and out with the background. How can i stop the img fading and keep centered in the div? I have tried using absolute position but when the page is in mobile view the image moves offscreen,
This is what i have currently.
<div class="slideme" id="slideme">
<img style="max-width: 90%; "src="img/header-logo.svg" class="img-responsive">
</div>
CSS:
#slideme{
position:relative;
width:100%;
height:200px;
}
#slideme div{
position:absolute;
width:100%;
height:200px;
}
The problem is that when you fade out the div, you fade out also the contents of that div. Basically, all goes away, including your second svg image which is contained by the #slidme div which also have the other image as background.
First, you should probably refactor your code to look more like this:
<div class="main-slider-container">
<img style="max-width: 90%; "src="img/header-logo.svg" class="img-responsive">
<div class="slideme" id="slideme"></div>
</div>
CSS
.main-slider-container{
position:relative;
}
#slideme div{
position:absolute;
width:100%;
height:200px;
top:0px;
right:0px;
z-index:0;
}
> img {
position:absolute;
width:100%;
height:200px;
top:0px;
left:0px;
z-index:1;
}
With this structure, you can individually, hide the #slideme div without affecting the svg image
Related
I want to display four images in 2x2 style with icon on the top right hand side of each picture.
<div class="img-wrapper">
<el-image class="image-single-mr10"
style="height: 250px; width: 250px; display:inline-block; position:relative"
v-for="pic in testUrls"
:key="pic"
:src="getTestURL(pic)"
/>
<span style="position: absolute; top: 0px; z-index: 3;">
OVERLAY
</span>
</div>
I am using el image in relative position. And I tried to use span to simulate the icon. However, I could not get span overlay on images. Moreover, I need to span four times to have each icon on top of the images. How should I do it?
I want to make responsive image slider for my website using Jquery and Javascript.
<div>
<ul>
<li>
<img src="#" alt="Slider Image" />
</li>
<li>
<img src="#" alt="Slider Image" />
</li>
<li>
<img src="#" alt="Slider Image" />
</li>
</ul>
</div>
My question is how to set the image width.
I set image width for 100% and height for auto.
I set div width for 100%, but when I resize the screen, the image is not responsive.
I want to learn from scratch instead using plugins possible.
How can I solve this problems?
You can achieve this by simply setting in your CSS something like this:
img {
display:block /*fix inline gap - optional*/
max-width:100%; /* the trick is here - setting max-width instead of width */
height:auto;
}
See snippet below with your code:
img {
display: block;
max-width: 100%;
height: auto;
}
/*demo styles*/
ul {
padding: 0;
margin: 0;
}
li {
margin: 0;
list-style: none
}
<div>
<ul>
<li>
<img src="//lorempixel.com/1600/900/sports" alt="Slider Image" />
</li>
<li>
<img src="//lorempixel.com/1600/900/city" alt="Slider Image" />
</li>
<li>
<img src="//lorempixel.com/1600/900/food" alt="Slider Image" />
</li>
</ul>
</div>
no need to use jQuery/JavaScript
Bro ,my advice to you is to use the plugin called bxSlider ( fully responsive ) slider. Easy for use and easy understandable.You can set modes, make adaptiveHeight...and much more options I personally was trying to make my own slide , after hours of a lot nervous I've decided to use that plugin. click here for downloading bxSlider !
Here's a fiddle of what you are looking for - assuming it's not a background image.
https://jsfiddle.net/WebDevelopWolf/u6vompp2/
Basically, the code you need to make your images responsive is:
img {
width:100%;
height:auto;
}
If it's a background image though then the you'll need:
div {
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
background:url('http://www.abstract-thinking.co.uk/img/logo.jpg')
}
that is because you haven't given a width and height for your image
so for your div, you have given width:100% and height:auto, (if you want you can give any px or % value for your div)
then for your image inside the div give width and height for it
(div img says images inside the div tag)
div img{
width:100%;
height:100%
}
in here, child element takes the full widh and height of it's parent element.hope this will help to you.
I'm using CarouFredSel for an image carousel, and I'm having an issue with the transitions between items.
I want to use some simple HTML in the carousel rather than plain old images, but when I do, the swipe transition doesn't work. While the old image slides out, the new image flashes in rather than sliding in and you can see the background briefly in between images.
<div id="carousel">
<div>
<img src="img/instagram1.png">
<div style="position:relative; z-index:100; bottom:20px;">Byline 1</div>
</div>
<div>
<img src="img/instagram2.png">
<div style="position:relative; z-index:100; bottom:20px;">Byline 2</div>
</div>
</div><!-- /carousel -->
As you can see from this JSFiddle, the transition effect works fine with just images, but it looks off when using HTML.
It turns out that all you have to do to fix this is apply a left float on the items like this:
#carousel div {
display: block;
float: left;
}
I two divs set within a parent div - a sidebar on the left & a content area to the right of that. I need to set the position of my content area (which has a fixed width) to always be 15px to the right of the sidebar (even as the browser window / sidebar stretches).
Setting the sidebar with position: absolute & a % width worked perfectly for the sidebar itself, but as the sidebar position is then absolute, the content doesn't recognise where the sidebar is & can't be positioned relative to it with CSS.
Here is an image of what I am trying to achieve:
Why are you using position absolute for the side bar?
I would just do it like this
<div class="container">
<div class="sidebar">
<p>This is your sidebar</p>
</div>
<div class="content">
<p>This is your content</p>
</div>
</div>
.container {width:100%; height: 1000px; background:blue;} /*didn't supply a width*/
.sidebar {width:25%; float:left; min-height:200px; background:lightblue; margin-right:15px;} /*you said sidebar has a % width*/
.content {width:250px; height:200px; background:red; float:left;} /*you said content had fixed width*/
Link to JS Fiddle to have a look
Unless I'm not understanding your question?
I have used wow slider in my web page. It is working fine. But I am facing one problem.
The css is
#wowslider-container1 {
zoom: 1;
position: relative;
max-width:960px;
margin:0 auto;
z-index:100;
border:none;
text-align:left; /* reset align=center */
}
#wowslider-container1 .ws_images{
position: relative;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
}
#wowslider-container1 .ws_images a{
width:100%;
display:block;
color:transparent;
}
#wowslider-container1 .ws_images img{
width:100%;
border:none 0;
max-width: none;
}
#wowslider-container1 a{
text-decoration: none;
outline: none;
border: none;
}
HTML is:
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><img src="images/amazing_sunset.jpg" alt="amazing sunset" title="amazing sunset amazing sunset amazing sunset amazing sunset" /></li>
<li><img src="images/apple_tree.jpg" alt="apple tree" title="apple tree"/></li>
<li><img src="images/beutiful_landscape.jpg" alt="beutiful landscape" title="beautiful landscape"/></li>
<li><img src="images/lightbox-btn-prev.gif" alt="nature" title="nature" width="63" height="32"/></li>
</ul>
</div>
<!-- Generated by WOWSlider.com v2.2 -->
</div>
If the client wants to upload a small size the image is not re-sized. But he upload a large size the image is resized. Totally he is not want to set the width and height. Please refer the last li. The image size is 63*62. But it is automatically re-sized to 500px. Please help me.
Within the WowSlider application (paid version), you have the option to set the height and width of the slider (either preset or custom). It appears that you have selected a width of 960px.
You also have the option to preserver an image's aspect ratio and/or stretch small images. Click on the wrench icon, click on Images, and you'll see the option on the right.
One note -- your client has an incredibly small image if it is only 63px by 62px. If you stretch that up to 960px wide, it is going to be incredibly distorted and pixelated. In this instance, I would request a higher quality image from the client.