i have seen several websites which does this including weheartit.com,tumblr flipkart .
when we place cursor on images it shows several additional links like comment,share,like etc however when that image is clicked it takes to some other links.
here are few links which i am interested if anyone can guide for this type of css formatting it will be a great help.
place ur mouse on any of the offers like electronic offers etc you can see share image will come over images
http://www.flipkart.com/offers?otracker=hp_widget_banner_0_image
go to any image you will see nice css effects and details will appear once the cursor goes above images here
http://weheartit.com/?page=1
please give sample example with one image atleast
You may check this out. The concept is called mouse over/hover effects, You can search on Google and find many similiar examples.
Check the following example from css-tricks:
Slide-in Captions
You should find the code within the example sites you provided in your description. For the site http://www.flipkart.com/offers?otracker=hp_widget_banner_0_image , the name of the div that contains the share contents is sharebox.
The CSS file that contains the styling and CSS effects for sharebox is the following:
http://img6a.flixcart.com/www/prod/lego-da812168-nogz.css
Search that for sharebox and try to figure out how they do it.
Related
i am currently doing a challange on frontend mentor but i have a problem with the background images i used to create the curved sections, if you go to the developer's page, and expand the screen to let's say 2000px, the curved section do not expand
A picture of what i am describing
The code to the github repository is https://github.com/Nadine-Green/Huddle-Landing-Page-With-Curved-Sections, i was thinking of using it as a direct image instead of it being a background, but i just wanted to hear from you all first.
I checked your GitHub repository and couldn't find the specific code referring to your attached screenshot containing curved background images.
Anyways refer to this it will help you take a better understanding of how to use background images properly on all screens (responsive).
If you are able to share the specific code snippet you are referring to with your question I would be able to help you further on.
I use shortcode to embed an HTML world map on one of my web pages. Right below the world map is a third party link for which I want to set the display value to "none", however since I have no CSS skills or web dev background I am having difficulty writing the custom CSS for this. I've played around with containers and specific page ID's, but no luck. The page is www.sheerheroine.com/map. Can anyone steer me in the right direction on how to write the code please? When I inspect the page I can see which container the link is in, however when I use this container the entire map is removed. Thanks!
The !important declaration makes the display CSS impossible to override. The following javascript would remove the element you wish to not display -- document.getElementsByClassName('fm-map-container')[0].childNodes[3].remove();. Try it in the developer's console. For it to work on the page, you would need to delay the execution until the element exists though. As others suggest, it would seemingly violate the terms of use of the lovely vector map you are using free of charge. For a proof-of-concept, however, you may find this code enlightening.
As the entire map con-taint is coming because of thirdparty image, better check with the that third party style code.
Or
in alternatively, just check the the height of the total map area.
lets assume here total height of map image is 10px from bottom.
and lets assume the height of that area(to which area,you don't want to show user) is 2 px from bottom.
Then create a div element, where you will put the entire map image, but follow the below stlye, where we can hide some portion of image to user
<div style="max-width: (10 - 2)px"> here .. put your map image url..</div>
I am a back-end developer and I'd like to create a little website using angular and boostrap.
I would like to create a galerie, and I have been looking around to see how it's done. I found a correct example on the following link : https://blueimp.github.io/Bootstrap-Image-Gallery/
In that case, the images are taken from flickr api, which sends 2 different pictures (small and large). The small one is the thumbnail, and when you click on it, it opens the large one.
My question is the following one : let's say I have all my images of different sizes, and that I would like to have thumbnails of those (same size, but responsive !) to create my gallery, what would be the way to do that? With css only?
Create parent <div> with fix width then add img inside by applying width:100% on image and height:auto. Please try to implement the example you found and if you find any issues post with your code.
I'm using the code found here to create my text links located on this page. What I am trying to accomplish is having the rollover text be the description of the link ie: 'Insight' goes to the 'About' page. Some of descriptions are too long and are getting cut off and when I try to make them bigger they just overlap the link next to it. Any suggestions on how to fix it or a better method I should be using? Here is the HTML I'm using.
<span data-title="Services">Ingenuity.</span>
Sounds like you're asking for design advice as well.
Judging by the way you have your links presented (each list item with an equal fixed width in a row), a longer description will certainly overlap other links if you do end up finding a solution to make them not "cut off" (it exists, but I'm just not sure if it'll give you a desired result that you're looking for).
Either customize the widths of each list item so they don't overlap, or use some other cool transition (i.e. have the description slide down under the link rather than flip it). That's what I would suggest personally; however, it's up to you to choose what's considered a "better method" of displaying your descriptions.
is there any plugin for Drupal, replacing tags with small icons (see the picture below, the icons are actually small circles, and the different colors are automatically generated.
I need to replace the tags with the circles, for each node, and the starting view.
Furthermore, when the mouse move over the tags, the tag title should appear as pop-up
thanks
Edited: SORRY, here is the image! :)
http://dl.dropbox.com/u/72686/tagsIcons.png
If I understand you correctly, what you are looking for is the taxonomy_image module.
I use it and it works very nicely.
I had to enhance it a little to do what I want inside a View, but other than that it answered my requirements.