Text appears on image hover with images in a series [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
so I know how to make text appear on hover with CSS when there's only one image. however...
I want to make a page where there's three images of the same dimensions lined up like:
x | x | x
and hovering over one image makes a text blurb about that image appear, while the other two images disappear. do I need javascript/jQuery to do this or is it possible to do in CSS alone?
also, this is a bit more complicated and not necessary for the project, but would it be possible to have the image that is being hovered shift to the left (for the second and third images) while the text appears? and/or is it possible to have a transition function so that the text looks like it's rolling out from behind a screen or something to that effect?
those last parts are totally optional and might not even be doable, really I'm just trying to figure out how to get individual divs to appear on hover while the other images disappear. thanks!

Yes, that's possible with CSS alone.
There are many ways to achieve this but the general idea is to have a parent element for each image (x in your question) containing the image and the caption that you want to appear over the image. You can then use CSS to make the caption overlay and/or transition in to position when hovering.
A quick example would be: (see demo code).
<div class="image-wrapper">
<img src="http://placehold.it/180x120/eeeeee">
<div class="caption">
Your caption text here.
</div>
</div>
<div class="image-wrapper">
<img src="http://placehold.it/180x120/eeeeee">
<div class="caption">
Your caption text here.
</div>
</div>
<div class="image-wrapper">
<img src="http://placehold.it/180x120/eeeeee">
<div class="caption">
Your caption text here.
</div>
</div>
CSS
.image-wrapper {
position: relative;
width: 180px;
float: left;
margin-right: 10px;
}
.image-wrapper:last-child {
margin-right: 0;
}
.image-wrapper .caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: none;
background: rgba(0,0,0, 0.6);
color: #fff;
padding: 0.5rem;
}
.image-wrapper:hover .caption {
display: block;
}

Related

How do I crop an image for screen size rather than resizing it in a web page? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
So I'm developing a web page and the top section of this page has a tiny column in the right side, and to the left of it an image which is occupying the rest of the section and causing my problem.
The issue is that the image extends beyond the device's screen size missing up the layout of the page. Now I don't want to resize it to fit, but rather crop the extra width from the image according the screen size, so that it look the same but you can't horizontally scroll through the page which is what I'm experiencing right now.
I don't really know if that makes sense but if you have any idea on how to solve this please write it here and I will try it.
To crop the image without resizing it you have to apply overflow: hidden; to the parent element.
To counter the padding of the parent element you have to set a negative margin that equals the padding of the parent.
div {
padding: 20px;
overflow: hidden;
}
img {
margin: -20px;
}
/* for demonstration purpose only */
div {
border: 1px solid red;
}
img {
display: block;
}
<div>
<img src="https://via.placeholder.com/900x200.jpg">
</div>
You change your img tag for a div with background of the img (I suppose you have img tag, you didn't specify). The div then won't exceed the boundaries regardless the img inside it.
<div id="img"></div>
<style>
#img {
background: url("your img");
}
</style>
// Use this instead of <img src="your img">

How to position text halfway through bottom responsively [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I am currently working with parallax effects on a website where i need a paragraph to go through halfway on the bottom of the page. But since the paragraph has to be responsive in font-size i am not quite sure if i need to convert the text into image or stick with pure text to solve this issue? It seems like a solution with images can enable me to do some tricks with pure JavaScript.
In general i feel it is very hard to control the text on the page especially for parallax where the text can appear in different positions. Maybe there are some good tools for this purpose?
https://jsfiddle.net/pt88w26u/2/
HTML:
<section id="first">
<div>
<p>This is a test</p>
</div>
</section>
<section id="second">
</section>
CSS:
html,
body {
height: 100%;
color: #fff;
font-size: 16px;
margin: 0;
padding: 0;
}
section {
min-height: 100%;
}
#first {
background-color: #000;
}
#second {
background-color: #ddd;
}
section > div {
top: 86%;
font-size: 5em;
position: absolute;
transform: translate(-50%, 0%);
left: 50%;
}
You can do this only with css.
To do this, set the position and transform of the div to
bottom:0px;
transform:translate(-50%,50%);
and remove the default margin on the p tag.
https://jsfiddle.net/pt88w26u/5/

How to keep an slide menu always open? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I´m using this tumblr theme:
http://flataura.tumblr.com/
And I want the slide menu at the right of the text "Flaty" that opens when you click on it, to be always opened. Is there any solution for this?
Here is the javascript of that slide:
http://static.tumblr.com/ssdtkch/gT6nanpl7/pageslide.js
Thanks!
Seeing from a comment that you are familiar enough to edit the CSS. Add this to the bottom of your CSS and it should show the menu AND hide the button that animates the show/hide:
body {
margin-left: 281px;
}
div#side {
display: block !important;
left: 0;
right: auto;
position: fixed;
top: 0;
height: 100%;
z-index: 1000000;
overflow-y: scroll;
width: 280px;
background-color: rgba(33,63,82, 0.93);
border-right: 1px solid #213f52;
}
a.open-sidebar.nav-button {
display: none;
}
Yes, there are ways to do this. But since it doesn't seem like you're very familiar with websites, the solution is too complicated via StackOverflow. Let me know if you would like to get in contact, and I can walk you through this.
In a nutshell, the #side element contains that left bit, but is always hidden. The #pageslide element is what gets shown, and as soon as you click the first time, the contents of #side get cloned into #pageslide. Then, jQuery (Javascript) is used to animate the transition, introducing a margin to your entire body element.
All of this can be overridden, but it is several steps. If you know a web developer, that information above should get them started. Otherwise, let me know if you want to get in contact.
Good luck!

jQuery slideshow with separate div containing image specific text

I have taken and essentially lightly modified a jQuery image slider to operate how I want, specifically one called: A Beautiful Apple-style Slideshow Gallery With CSS & jQuery.
I am currently attempting to link this slideshow to a separate div below that contains image specific text, I have achieved this in a very simple manor by hyper linking each thumbnail to load the content I want for each image.
Ideally I would like this to happen by using the next and previous controls for the slideshow but have tried multiple solutions without success. My current attempt loads the text for image 1 and image 2 but gets stuck from there onwards.
The html, css and JavaScript for my attempt can be found at http://jsfiddle.net/v9vf9/ (The result does not appear correctly as all my files are for the moment stored locally)
I am sure that what I am trying to achieve is not very complicated but seems to be beyond my ability, I appreciate any advice, help or solutions to succeed with this!! And look forwards to improving my knowledge.
Thank you in advance, Carl
So, as suggested in the comments
http://jsfiddle.net/lollero/Sw4y8/
It's a bit easier to put the text inside the animated slides so that they are animated with the images automatically and most importantly give #slides element a bigger height where the text can fit in.
HTML:
<div class="slide">
<img src="http://placekitten.com/g/500/230" alt="" />
<div class="text">Text</div>
</div>
</div>
<div id="thumbnails">Thumbnails</div>
CSS:
#slides {
height: 550px; /* or what ever amount is big enough to fit the text there too */
float: left;
position: relative;
z-index: 5;
}
#thumbnails {
float: left;
clear: both;
position: relative;
z-index: 10;
top: -110px;
}
.text { margin-top: 50px; /* for example if you want to give thumbnails room to sit above the text */ }

Alternatives to SuperSized [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
I'm looking for alternatives to Supersized. I'm currently using version 3.0 to show some rotating background images and found two problems on Internet Explorer.
The transicion is far from smooth, and is very slow. On Chrome and Firefox this works ok.
Some times, the background images are vertically enlarged and deformed.
Does anyone knows an alternative, or a tweak to fix those problems?.
Use any slider and float it behind the content of the page using z-index. I like Nivo Slider when I'm just sliding images, and bxSlider when I need to slide a div or ul with arbitrary content.
The element you're applying z-index to must be position: relative; or position: absolute. One thing to note about position: absolute; is that it will position the element with respect to the first parent element that is position: relative; or position: absolute. That may sound confusing, so how about an example:
Put your slider inside <body> and wrap it in a div:
<body>
<div class="container">
<!-- Your slider divs/imgs/ul -->
</div>
<div class="rest-of-page">
...
</div>
</body>
Then some css:
/* Position .container relative to body (not really needed, just an example) */
body { position: relative; }
/* Float slider behind content of page, expanding to width/height of document
* and use z-index of -1 to place it behind actual page content. */
.container {
position: absolute;
top: 0%;
left: 50%;
width: 100%;
height: 100%;
z-index: -1;
}
/* Float the actual page content above slider using z-index of 0 */
.rest-of-page { position: relative; z-index: 0; }
And that should do it. Normally you have to define a width for your slider images, but with some fiddling I think you can get it working. In my own projects I've been centering the slider to the page, not taking up the entire background, so your mileage may vary.
I'm not sure if this can give what you need. But you can take a look at SuperBGImage. Actually it's inspired by supersized but with some convenient improvements

Categories