Customizing .NET's MVC template Part 2- Cards, Images, and transitions
Tags: csharp, dotnet, css, webdev
Published: 2021-04-30 19:51:09

This is part two in a series on improving the MVC template, see [part 1 here.](https://dev.to/sbrevolution5/customizing-net-s-mvc-template-part-1-the-dark-side-5doa)

Here's our starting point:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnooazxddg72ob0ozs1m.jpg)
# Cards

So I know we just got done making that table look nice, but we can do much better by switching it to display cards.  On the index page, let's use the foreach loop to show cards instead of rows on our table.  In my opinion, this makes the movies in the database look more appealing than just lines of data, and therefore improves user experience. To get the look right, make sure each card renders with a `bg-dark` class. 

Wrapping these in a div with class `card-deck` will make your card the same height, and allow footers to be aligned across multiple cards.
![Card take 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8wudsfuzk0rilkajz39q.png)

The thing I don't really care for is the way the cards blend into the background too easily.

To fix this issue, lets add shadow to the cards with class `shadow-lg`, and alter the background class to `bg-secondary`. 

This will make the site look a lot better!
![Cardv2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/saxsqrfdxw5jjgbcal7i.png)

The code for this looks like: 
![Card Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dm0d3ae3zpat25snv2ut.png)
#Thumbnails
I've built a custom image service to access images in my database, but if you have images stored with your model, an easy thing you can do is to add them to the top of the card.  

The problem arrives when you add large images,  since the cards take the width of the container.  The simplest way to fix this is to use the bootstrap grid.  Wrapping each card in a div with a col size class (I personally used `col-sm-4` to get 3 per row.) and also adding in a little margin to that column with `mb-3`. Using `h-100` in the card itself will scale the cards, and therefore the images, down to fit your specifications.  

![Card Columns](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/todx70quua7o4sanhy9w.png)
This made it look like a `card-deck` div without actually using the card-deck class.  I tried that out but it was putting all my cards on one row unless I was on a small screen. 
![Card views](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3j55y04c62do1bpqku8k.png)


#Transitions
Adding in a touch of animation on page load can really make your page pop.  I'm using the CDN from [animate.css](animate.style) to add an animation when the card enters the view for the first time by adding the classes `animate__animated animate__bounceIn` to the card element

[![Gif of animation](https://i.gyazo.com/9102fdab826fc3594e1f374490136c3b.gif)](https://gyazo.com/9102fdab826fc3594e1f374490136c3b)

This may be a little intense, so look through their library and pick something more subtle 

Another option (I do not recommend doing both, as it will trigger the entrance animation when the mouse leaves the area) is to have the card pulse on hover.

To do this, I had to extract a bit of code from the animate.css source [specifically here](https://github.com/animate-css/animate.css/blob/main/source/attention_seekers/pulse.css) I then renamed their pulse class to `.hover-pulse:hover` and applied the `animate__animated hover-pulse` classes to my card.

I stuck with just the entrance animation, the hover was a bit much.  

# In conclusion
WHEW, that was a lot of tinkering, but now I've got some nifty tricks to customize the rest of the app.  While I work on the other pages, what are some visual additions that could add some pop to this project?