I would appreciate little help on this.
I wanna add an image/text overlay hover on images of this slider below.
So when someone's hovering the image will appear a 50% transparent black block and the "details" image/text in the middle.
This is an example of hovering (the zoom and details buttons) : http://themes.derby-web-design-agency.co.uk/Lola-Html-Theme/Light/
This is the slider I wanna use : http://codepen.io/anon/pen/Alzhn
Thanks in advance !
No need to reinvent the wheel. Consider the following projects:
http://wowslider.com/jquery-slideshow-huge-demo.html
http://bxslider.com/examples/image-slideshow-captions
For overlays, you can also consider
http://buildinternet.com/project/mosaic/1.0/
Try any of the above links for implementation and be more specific with your question.
For example, I am having issue with X, I want to do Y and I have tried solving this using XYZ. Your JS fiddle is just a copy of your existing project with no indication of what you have tried to solve your problem.
As with any learning environment, I would take small steps first. In your use case, I would tackle the problem as follows:
Require on hover caption
Require slider
Then when step#1 is completed, you can build on top of that and so forth.
Related
I would like to use the card element to forward to a blog post. My idea was to have the heading displayed permanently and the respective description when entering the mouse.
As soon as the mouse leaves the element, the description should disappear again. The heading should be moved to the original position.
To illustrate my thoughts, I have created this sketch.
My current progress is relatively modest.
I have already tried to use both fadeInUp and fadeOutDown (animate.css). This turned out to be a bit unsatisfying. You can find a preview here.
Here, you can find a preview without animations.
In principle, the desired animations are in place. However, the heading does not end up in the original position, which of course is caused by the use of fadeOutDown.
Personally, I feel uncomfortable integrating Animate.css when I want to implement a fairly simple animation. Can you give me your advice at this point?
How would you rate my progress? Was that a good approach?
Here is your solution. Fiddle
Just add
.removeClass().addClass("card-title fadeInDown down animated");
to
$(this).find('.card-title').removeClass().addClass('card-title
fadeOutDown animated')
In hover callback
for the integrating Animate.css Part. You dont have to use the whole css file just use the part that you need
I am trying to create a web design with a unique shape. This is a simple coming soon template with the top left corner for info button and the bottom right corner for contact button. The green center area for the logo and other basic stuff.
The basic layout looks like this. I did this by creating 3 div elements. When it comes to the background color, this is fine. But the challenge is that I want those white pieces are like cut off from the green one. Something like this.
I also wish to have an output similar to the above image when it comes to playing a slideshow or Youtube/Vimeo video or custom video.
This is a Youtube video playing on the green area. But not the way I want it to be.
I want the final output to look similar to this. On the body background a pattern or a small animating pattern. Above that the cut-out layout and over that custom design another darker pattern to make it bit more attractive.
I know I am asking a lot here. But I never see any such design with a splitting of something from parent div (I did try overflow method, it didn't work or I missed something.) On top of this, the design should be responsive and the size of cutoffs (white triangles) must decrease in size with the very smaller displays.
I really need help from you guys. Thank you so much in advance.
I made a simple image slider to show the houses at sale of a properties website, but the slider doesn't slide the whole width of the divs containing the images. I made a codepen at
http://codepen.io/anon/pen/Eamns to illustrate what I mean, does someone know how can I slide the element without leaving a small bit of it visible? Somehow I don't like to use the whole lot of sliders that are out there, but building my own. I'll appreciate any help, as you can see I'm using the outerWidth and margin properties to determine the distance of the slide, but it's not very clean and I still don't like it.
Thanks in advance
[1]: http://codepen.io/anon/pen/Eamns
Not sure if your CodePen is complete. If you want something clean and easy to implement, I recommend using the 'jquery cycle' plug-in (http://jquery.malsup.com/cycle/) to create your slider. It is the easiest way I have found to make many types of image sliders.
What I'm trying to do is something like you see at http://www.nejm.org/doi/full/10.1056/NEJMimc1109704. (Click Play and go to page 5 - the interactive physical exam.) I think they are doing this with Flash, but I'd like to use javascript/jQuery.
Basically there's an image that has multiple captions. The captions have arrows that point to different parts of the image, but that's not essential for me. When you click on different links, different captions appear.
Would I tackle this as an image map? I.e. create a map, and use jQuery to toggle different parts of the map? Is there a plug-in that does that? Google searches aren't helping me - but maybe I don't know what to look for. Any help will be appreciated.
I'm having the same problem and I found imageMapster. Check out
http://www.outsharked.com/imagemapster/default.aspx?demos.html#beatles
I think this is what you want to do. Just this solution today, haven't figured it out yet. Looks promising though. Otherwise check out qTip2
http://craigsworks.com/projects/qtip2/demos/
Maybe some adaptions let you/us do what we wanna do
Good luck! Keep u updated if I figured it out
Why would you need jQuery?
Anyway, put your main image down, and set its position to be fixed where you want it. You could even put it in a nice container div, just make sure all your caption divs are relative to the same parent. Then put fixed position divs of your caption images over it with a higher z-index in your css. Then place your caption images at the appropriate top and left positions until they are correct. Of course, use transparent PNGs.
All you need to do to toggle them is set the element's style.display to "none" or "inherit"
If you'll take a look at this:
http://jsfiddle.net/hunterscott/JYLVQ/
You'll notice that if you try to drag the image, you can see the helper move, but it won't leave the gallery box. I have a feeling this is a CSS thing, but I'm not sure where it is.
Edit: Sorry, I need to be more specific, since that fiddle is pretty watered down from the full project. Gallery-wrap has to be set to overflow:hidden because it is an image carousel that shows 5 images at a time, and the rest are hidden. The user clicks arrows to advance through them. If I make gallery-wrap visible, then the images that shouldn't be seen are seen stacked below the first 5.
#gallery-wrap
is the culprit, it has overflow:hidden; set.
EDIT: ah, thanks for the clarification. Does this help?