{"id":13397654,"url":"https://github.com/miketricking/bootstrap-image-hover","last_synced_at":"2025-03-14T00:32:35.966Z","repository":{"id":35564937,"uuid":"39836900","full_name":"miketricking/bootstrap-image-hover","owner":"miketricking","description":"Image hover effects that work with or without bootstrap","archived":false,"fork":false,"pushed_at":"2017-03-07T12:46:06.000Z","size":6596,"stargazers_count":866,"open_issues_count":0,"forks_count":362,"subscribers_count":62,"default_branch":"master","last_synced_at":"2024-12-06T21:16:48.136Z","etag":null,"topics":["bootstrap","css","css-hover-effects","hover","hovers","image","imagehover"],"latest_commit_sha":null,"homepage":"https://miketricking.github.io/bootstrap-image-hover","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/miketricking.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-28T13:55:07.000Z","updated_at":"2024-10-18T14:27:06.000Z","dependencies_parsed_at":"2022-08-31T22:00:41.469Z","dependency_job_id":null,"html_url":"https://github.com/miketricking/bootstrap-image-hover","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miketricking%2Fbootstrap-image-hover","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miketricking%2Fbootstrap-image-hover/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miketricking%2Fbootstrap-image-hover/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miketricking%2Fbootstrap-image-hover/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/miketricking","download_url":"https://codeload.github.com/miketricking/bootstrap-image-hover/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243504909,"owners_count":20301522,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","css","css-hover-effects","hover","hovers","image","imagehover"],"created_at":"2024-07-30T18:01:37.274Z","updated_at":"2025-03-14T00:32:35.956Z","avatar_url":"https://github.com/miketricking.png","language":"HTML","readme":"# imagehover\nhtml and css code for image hover effects with or without bootstrap\n\nHave tested all individually in codepen using bootstrap.\n\nTIPS:\n\nIf you wish to use these without bootstrap just remove the col classes from the top level div.\n\nWe need to consider mobile, the hovers that reveal social icons are great except for many these will be inaccessible as some mobiles do not understand a hover state. One way would be to put some visible soical icons else where and leave the hover social icons there as a nice effect for those who find them. Another option is to use CSS media queries so on small screen sizes the styles are already in place. They will not be able to see the cool effect but atlest you are making any content hidden by the hover styles more accessible.\n\nFor example on the first effect these are the styles that are applied during a :hover state. So you'd simply copy the styles again and wrap them inside and media query and remove the :hover part of it.\n\nFor example you would copy the following:\n\nhovereffect:hover img {\n-ms-transform:scale(1.2);\n-webkit-transform:scale(1.2);\ntransform:scale(1.2);\n}\n\n.hovereffect:hover .overlay {\nopacity:1;\nfilter:alpha(opacity=100);\n}\n\n.hovereffect:hover h2,.hovereffect:hover a.info {\nopacity:1;\nfilter:alpha(opacity=100);\n-ms-transform:translatey(0);\n-webkit-transform:translatey(0);\ntransform:translatey(0);\n}\n\n\nAnd then wrap it inside a media quiery and remove all the :hover from the styles.\n\n@media (max-width: 750px) {\n\n hovereffect img {\n -ms-transform:scale(1.2);\n -webkit-transform:scale(1.2);\n transform:scale(1.2);\n }\n\n .hovereffect .overlay {\n opacity:1;\n filter:alpha(opacity=100);\n }\n\n .hovereffect h2,.hovereffect a.info {\n opacity:1;\n filter:alpha(opacity=100);\n -ms-transform:translatey(0);\n -webkit-transform:translatey(0);\n transform:translatey(0);\n }\n\n}\n\n\nTO DO:\n\nMake all the effects fully responsive. Some are already/some need slight changes depending on sizes.\n\nCreate the effects using SASS.\n\n\n\nSpecial thanks to:\n \ncodrops (http://tympanus.net/codrops/)\nstart boot strap (http://startbootstrap.com)\nbootstrap (http://getbootstrap.com/)\nfont awesome (http://fortawesome.github.io/Font-Awesome/)\ngithub (http://github.com)\nunsplash for images (https://unsplash.com/)\nfont squirrel (http://fontsquirrel.com/)\ncodepen (http://codepen.com/)\n","funding_links":[],"categories":["HTML"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiketricking%2Fbootstrap-image-hover","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmiketricking%2Fbootstrap-image-hover","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiketricking%2Fbootstrap-image-hover/lists"}