Hey, I’m very new to Jekyll and html. I followed this video https://www.youtube.com/watch?v=8lJhXJCUYCc to get started and now I’m trying to implement hovering images like here; https://www.youtube.com/watch?v=Zz8A4NqoLrE. When I run jekyll locally, I can just paste the html code and it works. But on github pages, html is not displayed for some reason. I tried googling it, but none of the solutions work for me. I’d be really grateful for any ideas!
can you post a link to your site that isn’t working? you likely have a baseurl issue - so the css is may not be loading causing things to not look right.
Sure, here it is: GitHub - PewrityLab/pewritylab.github.io: Github Pages template for academic personal websites, forked from mmistakes/minimal-mistakes
Indeed, baseurl is empty
The issue is not clear from your website. Which page has the image gallery you are trying to generate with hovering images behaviour ?
this is the relevant file. Running it locally will create a hovering image, but it doesn’t show up on GH pages… I’m probably not using Jekyll correctly because I’m pasting html code instead of using layouts, but this is the only way I found to create that hovering effect
inspecting the pages I don’t see any CSS code embedded, maybe some error on Github prevents it from being re-compiled correctly?
You need to put CSS in SCSS file. For this theme, you can do it by creating a file _custom.scss in https://github.com/PewrityLab/pewritylab.github.io/tree/master/_sass. Then you need to add @import custom.scss in and at the end of file https://github.com/PewrityLab/pewritylab.github.io/blob/master/assets/css/main.scss. You can find more information about SASS asset manipulation here.
This will add the new CSS rules you want ready for the GitHub repo. You may then use the HTML code in the markdown to test it. You might need to markdownify content as per here.
I do suggest you make layout changes in template files though.
Ok so the content of both _custom.scss and main.scss is @import “custom.scss”; right?
In _custom.scss you put the CSS you want. Then you include this file in main.scss so Jekyll can process the styles you want.
hm pasting the code into _custom.scss gives me this error: Conversion error: Jekyll::Converters::Scss encountered an error while converting ‘assets/css/main.scss’:
Invalid CSS after “<”: expected “{”, was “!DOCTYPE html>” on line 1
Adding curly braces doesn’t work unfrtunately
sounds like you put html into the scss file? the scss file is just for css.
The file you are editing with putting the whole html in is not being done in a good way - you are posting the entire html page contentes including the head and body tags and that is most likely going thru a layout with its own head and body tags?
try putting the css into your scss file:
.container{
width: 90%;
padding: 20px;
margin: 100px auto;
display: flex;
flex-direction: row;
justify-content: center;
}
.box{
width: 250px;
margin: 0 10px;
box-shadow: 0 0 20px 2px rgba(0, 0, 0, .1);
transition: 0.3s;
}
.box img{
display: block;
width:100%;
border-radius: 5px;
}
.box:hover{
transform: scale(1.3);
z-index: 2;
}
then remove the html, body and style tags from your html page and just have the html:
<div class="container">
<div class="box">
<img src="images/500x300.png">
</div>
</div>
Awesome, thanks for the help! The image didn’t load unfortunately, but the zooming effect is working 
Try placing / in image url → /images/500x300.png .
This worked, thank you!